?
原文链接：http://www.neoease.com/css-z-index-property-and-layering-tree/
?
CSS 中的 z-index 属性用 于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.
?
这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.
本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.
目录
- 顺序规则
- 定位规则
- 参与规则
- 默认值规则
- 从父规则
- 层级树规则
- 参与规则 2
- 总结
顺序规则
如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.
<div id="a">A</div> <div id="b">B</div> |
定位规则
如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系.
<div id="a" style="position:static;">A</div> <div id="b">B</div> |
如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.
<div id="a" style="position:relative;">A</div> <div id="b">B |
