关于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