关于z-index [译]
(命名约定:无z-index即为auto,positioned即为非static; 上===front,下===back)
通常情况下,z-index遵循一下规律,其实是stacking order原则:
1、无z-index和positioned时,按照html结构顺序,后出现的节点在上面(stacking order靠后的在上面)
2、positioned的元素在非positioned元素上面
3、z-index仅在元素position时有效,对非positioned的元素做z-index,啥也不会发生(这里可用负margin实验)
当触发了stacking contexts时,元素的上下关系则遵循一下上下顺序(from front to back):
1、positoned + 正z-index
2、positoned
3、非positioned
4、positioned + 负z-index
5、The stacking contexts`s root element (对这个理解不透彻)
另外要说:a、如果一个元素b,他的父元素B比同上下文的A更back,那么b不可能在A及其子元素a更front
b、如果子元素b是positioned+负z-index,那么他可能比其父B back。(This will only work if the element's parent is in the same stacking context and is not the root element of that stacking context. 表示不太懂。。)
那么什么时候会触发stacking contexts?满足一下中的一条即可:
1、如果元素是html跟节点(因此可以无视stacking order规则,仅看stacking contexts规则了)
2、positoned + 非auto的z-index
3、opacity小于1
原文地址:What No One Told You About Z-Index