CSS中 z-index 的介绍

 

CSS样式表中Z-index属性的一些特征：

• Z-index属性的默认值是0
• 元素可拥有负的 z-index 属性值，如z-index:-1
• Z-index属性无继承性
• Z-index属性JavaScript 使用语法：object.style.zIndex=”1″
• 几乎所有主流浏览器都支持 Z-index 属性

 

Z-index示意图

 

 

 

CSS样式表中Z-index属性使用的注意事项：

（1）Z-index仅对定位元素有效（如position:relative\absolute\float）；

（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对象。

（5）在父元素的子元素中设置Z-index的值，可以改变子元素之间的层叠关系

 

 

  参考资料： CSS中 z-index 的用法    http://www.studyofnet.com/news/207.html