CSS z-index的用法

理清 position及z-index的用法:

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置,

 

z-index：其实从字面上已经可以解释；z是从x、y以后的第三个轴，从网页上表现就是除了上下左右外的前后。
规定这个属性，首先要求Div必须是浮动的，z值越大，Div越靠前；数值可以不连续。

 

例如

<div style="z-index:1000;background:red;color:white;width:200px;height:200px;">图层1</div>
<div style="z-index:100;background:yellow;color:blue;width:200px;height:200px;position:absolute;left:70px;top:120px;">图层2</div>
<div style="z-index:10;background:green;color:white;width:200px;height:200px;position:relative; left:30px;top:-150px;">图层3</div>

 

 

理论上图层1的z-index值设最大，应该排在最上面，由于它没有设浮动，遵循HTML定位规则

为什么图层3的top设负值呢？因为position:relative不能层叠，它应该是在图层1的下方，如果要它上去一点。只能设负值。而图层2设position:absolute浮动效果，它可以任意摆放，不受其它div影响，完全根据html页面定位

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、这个属性不会作用于窗口控件，如selected对象。

层级关系的比较:

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 的元素来参与比较.