div层调整z-index属性⽆效原因分析及解决⽅法
z-index ⽆效
在做的过程中，发现了⼀个很简单却⼜很多⼈应该碰到的问题，设置Z-INDEX属性⽆效。在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作⽤有个⼩⼩前提，就是元素的position属性要是relative，absolute或是fixed。position标签属性
1.第⼀种情况（z-index⽆论设置多⾼都不起作⽤情况）：
这种情况发⽣的条件有三个：
1、⽗标签 position属性为relative；
2、问题标签⽆position属性（不包括static）；
3、问题标签含有浮动(float)属性。
eg:z-index层级不起作⽤，浮动会让z-index失效，代码如下:
复制代码
代码如下:
<DIV >
<IMG src="/131101/1A5494I0-0.jpg">
</DIV>
解决办法有三个（任⼀即可）：
1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。
2.第⼆种情况
IE6下，层级的表现有时候不是看⼦标签的z-index多⾼，⽽要看整个DOM tree（节点树）的第⼀个relative属性的⽗标签的层级。
eg:IE7与IE6有着同样的bug，原因很简单，虽然图⽚所在div当前的⽼爸层级很⾼(1000)，但是由于⽼爸的⽼爸不顶⽤，可怜了9999如此强势的孩⼦没有出头之⽇啊！，代码如下:
复制代码
代码如下:
<DIV >
<DIV >
<DIV > <IMG src="/131101/1A3194V7-1.jpg"> </DIV>
</DIV>
</DIV>
解决办法：在第⼀个relative属性加上⼀个更⾼的层级（z-index:1），代码如下:
复制代码
代码如下:
<DIV >
<DIV >
<DIV > <IMG src="/131101/1A3194V7-1.jpg"> </DIV>
</DIV>
</DIV>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。