z-index属性

属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是直接有效的

 

而设置为relative对象的z-index属性则要按照以下规则设置

参与规则：

        z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

 

 

默认值规则：

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

 

 

从父规则：

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

 

 

如果我们将所有父节点的 z-index 属性去除, 诡异的事情发生了. IE6 和 IE7 浏览器显示效果不变, 而 W3C 浏览器的子节点不再从父, 而是根据自身的 z-index 确定层级. 根据默认值规则, IE6 / IE7 和 W3C 浏览器上的元素存在 z-index 默认值的区别. 我们相信, 仅当 position 设为 relative, absolute 或者 fixed, 并且 z-index 赋整数值时, 节点被放置到层级树; 而 z-index 为默认值时, 只在 document 兄弟节点间比较层级. 在 W3C 浏览器中z-index 均为 auto, 不参与层级比较.设置了 position 而没有 z-index 的节点虽然不参与层级树的比较, 但还会在 DOM 中与兄弟节点进行层级比较. 在 IE6 和 IE7 中, 因为设置了 position:relative, 而且 z-index 的默认值为 0, 所以也参与层级树比较,

转载于:https://www.cnblogs.com/aoooo/p/6738530.html