z-index 无效与注意事项

注意事项：

1. z-index只能作用在position为absolute,relative,fixed的非static元素上

2. z-index只能在同等级元素上作用，无法在父元素和子元素上起作用（父元素和别的父元素的子元素这样是无效的）

 

z-index无效：

1.第一种情况（z-index无论设置多高都不起作用情况）：

这种情况发生的条件有三个：

1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。

解决办法有三个（任一即可）：

1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。

 

2.第二种情况

IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。

<p style="POSITION: relative">

<p style="POSITION: relative; Z-INDEX: 1000">

<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>

</p> 

</p>

解决办法： 在第一个relative属性加上一个更高的层级（z-index:1）