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{ |
前台效果:
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 个元素为同级元素.
•根据上面的结论来最最后的比较, 层级高的元素会越靠近用户的显示器并能覆盖层级低的元素
代码如下 | 复制代码 |