CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.
Z-index是什么意思？在CSS2.0中，Z-index 属性用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（Z轴）。
1、CSS样式表中Z-index属性的一些特征：
•Z-index属性的默认值是0
•元素可拥有负的 z-index 属性值，如z-index:-1
•Z-index属性无继承性
•Z-index属性JavaScript 使用语法：object.style.zIndex=”1″
•几乎所有主流浏览器都支持 Z-index 属性
2、CSS样式表中Z-index属性的使用方法：
样式代码：
| 代码如下 | 复制代码 |
|
.box{ position:absolute; left:0px; top:0px; z-index:-1; } |
|
前台效果：
css样式表中z-index属性的使用
3、CSS样式表中Z-index属性使用的注意事项：
（1）Z-index仅对定位元素有效（如position:relative）；
（2）Z-index只可比较同级元素。这也许是大家很容易忽视的问题，我就卡在了这里。也就是说，Z-index只能对同级元素进行分层展示；
（3）Z-index的作用域：假设A和B两个元素都设置了定位（相对定位、绝对定位、一个相对一个绝对定位都可以），且是同级元素，样式为
.boxA{z-index:4}
.boxB{z-index:5}
于是，不难看出，元素B的层级要高于元素A，在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；
（4）这个属性不会作用于窗口控件，如select对象。
以上关于Z-Index的总结都是个人通过解决实践过程中遇到的问题而得出，希望能给遇到CSS样式表中Z-Index问题的朋友有所指引。
关于 z-index, 目前遇到的一些问题
1.某些浏览器下元素层级遮盖存在 bug.
2.某个元素 z-index 设的太大, 导致始终无法被遮盖.
3.JavaScript 动态计算 z-index, 导致元素覆盖关系部可控.
层级遮盖 bug 出现的原因
1.IE6/7 对 z-index 的表现跟 IE8 及以上浏览器不一致.
2.position 值为非 static 时, 如果不设置 z-index 属性, IE6/7 下 z-index 默认为 0, 而 IE8 及以上浏览器 z-index 为 auto, 且 zindex:auto 的元素不参与堆叠优先级比较.
z-index IE6/7 IE8/9 Firefox/Chrome
不设置 0 auto auto
number number number number
层级关系的比较
先看几点结论:
1.对于同级元素, 默认 (或 position:static) 情况下文档流后面的元素会覆盖前面的.
2.对于同级元素, position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素, 即 z-index 越大优先级越高.
3.IE6/7 下 position 不为 static, 且 z-index 不存在时 z-index 为 0, 除此之外的浏览器 z-index 为 auto.
4.z-index 为 auto 的元素不参与层级关系的比较, 由向上遍历至此且 z-index 不为 auto 的元素来参与比较.
在上面 2 点结论的基础上, 我们引入定位树(非 W3C 官方词汇) 的概念来做层级的比较. 在定位树这个概念下, 浏览器在渲染 DOM 节点时, 除了生成 DOM 树之外, 还会根据 DOM 树中的定位元素 (position 不为 static) 生成定位树.
DOM 树 (左上), 定位树 (右下) 对比如下图 (其中边上有红色圆圈的表示该元素 position 不为 static).
可以这样理解：定位树中包含了 DOM 树中 position 不为 staitc 的全部元素. 而非同级元素比较层级关系可以比较如下.
•向上遍历定位树的父节点直到 2 个元素为同级元素.
•根据上面的结论来最最后的比较, 层级高的元素会越靠近用户的显示器并能覆盖层级低的元素
| 代码如下 | 复制代码 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> #king_of_diamonds { position: relative; background-color:gray; width:30px; height:30px; left: 145px; top: 145px; } #ace_of_diamonds { position:relative; background-color:blue; width:300px; height:300px; left: 160px; top: 130px; z-index: 1; } </style> </head> <body> <form id="form1" runat="server"> <div id="king_of_diamonds"> a </div> <div id="ace_of_diamonds"> b </div> </form> </body> </html> |
|