IE6中z-index失效_ie6遮罩层 z-index失效-CSDN博客

本文链接：https://blog.csdn.net/u010200222/article/details/45622639

1.问题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML5</title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			.red {
				position:absolute;
				left:0;
				top:0;
				width:100px;
				height:50px;
				background:red;
				opacity:0.5;
				filter:alpha(opacity=50);
				z-index:1;
			}
			.rise {
				position:relative;
				z-index:100;
			}
			img {
				float:left;
			}
		</style>
	</head>

	<body>
		<div class="red">
		</div>
		<div class="rise">
			<img src="suv.png" alt=""/>
		</div>
	</body>
</html>

正常的显示效果：

在IE6中的显示效果：

2.触发条件及解决方法

触发条件：（1）父元素的 position属性为relative；（2）问题元素不是定位元素，即position属性的值是static；（3）问题元素含有float属性。

解决方法：（1）将父元素的position属性的值改为absolute；（2）将问题元素设成定位元素；（3）问题元素去除float属性。

3.问题扩展

如果一个元素的position属性值是absolute，那么最近的定位祖先元素构成包含块，也就是说最近的祖先元素的position属性的值为relative、absolute和fixed。子元素的层级有多高不是看它的z-index，而是要看其最近的定位祖先元素的z-index。但是在IE6中，子元素的层级则是跟其最上层的定位祖先元素有关。

下面是示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>HTML5</title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			.red {
				position:absolute;
				left:0;
				top:0;
				width:100px;
				height:50px;
				background:red;
				opacity:0.5;
				filter:alpha(opacity=50);
				z-index:1;
			}
			.rise {
				position:relative;
			}
			.rise_1 {
				position:relative;
				z-index:100;
			}
			.rise_2 {
				position:absolute;
				z-index:200;
			}
			img {
				float:left;
			}
		</style>
	</head>

	<body>
		<div class="red">
		</div>
		<div class="rise">
			<div class="rise_1">
				<div class="rise_2">
					<img src="suv.png" alt=""/>				
				</div>
			</div>
		</div>
	</body>
</html>

正常的显示结果：