本文探讨了IE6环境下z-index层级设置不起作用的原因，并提供了两种解决方案：改变父元素的position属性为absolute，或者清除问题元素的float属性。同时分析了当第一个父元素的z-index比背景层低时的问题及其解决方法。
IE6下z-index层级设置再高都不起作用
<html>
<head><title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
</style>
<body>
<!--
问题一：
1、父标签position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性 (三个都具备才会发生此种情况)
解决办法:(以下任选一种)
1、改变父标签position属性为absolute
2、给img添加position属性
3、清除img的float
-->
<div id="blank"></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
<!--
问题二：
问题标签的第一个父标签的z-index比背景低。
"第一个父标签"定义:问题标签的所有父标签中,第一个position为relative的标签
-->
<div id="blank"></div>
<div style="position:relative;"> <!--第一个父标签-->
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
</body>
</html>
解决的时候先看问题一的情况是否存在。如果解决完问题一仍然不起作用，再观察一下问题二
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
