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

  

 

  

posted @ 2013-02-28 17:58  王冶soda  阅读(196)  评论(0编辑  收藏  举报