sofish · October 13, 2010 11:12
diff --git a/z-index.htm b/z-index.htm
 <!doctype html>
 <html>
 <head>
 <meta charset="gb2312">
 <title>IE z-index bug</title>
 	<style type="text/css">
 		#t{position:relative;height: 300px;}
 		#yellow{position:relative;}
 		#yellow p, #green{width:200px;height:200px;background-color:#9c0;;}
 		#yellow p{position:absolute;background-color:#FF0;z-index:10000000000;}
 		#green{position:absolute;top:190px;left:50px;z-index:10;}
 	</style>
 </head>

 <body>

 	
 		<h3>这个bug的解决方案:</h3>
 		<ol>
 			<li>#yellow不设置z-index值: 无论#yellow p设置多高的z-index值，都永远在#green下面</li>
 			<li>#yellow设置z-index值: 无论#yellow p设置多高的z-index值，只要#yellow的值高过#green的值，则#yellow p将一直在#green之上。</li>
 		</ol>
 				
 		<h3>IE6/7 z-index bug Demo：</h3>	
 		<div id="yellow">
 			<p>#yellow p<br />应该是在上面的</p>
 		</div>
 		<div id="green">#green<br />IE6/7显示在上面，实际上应该在下面</div>
 		
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="gb2312">
	<title>IE z-index bug</title>
	<style type="text/css">
	#t{position:relative;height: 300px;}
	#yellow{position:relative;}
	#yellow p, #green{width:200px;height:200px;background-color:#9c0;;}
	#yellow p{position:absolute;background-color:#FF0;z-index:10000000000;}
	#green{position:absolute;top:190px;left:50px;z-index:10;}
	</style>
	</head>

	<body>


	<h3>这个bug的解决方案:</h3>
	<ol>
	<li>#yellow不设置z-index值: 无论#yellow p设置多高的z-index值，都永远在#green下面</li>
	<li>#yellow设置z-index值: 无论#yellow p设置多高的z-index值，只要#yellow的值高过#green的值，则#yellow p将一直在#green之上。</li>
	</ol>

	<h3>IE6/7 z-index bug Demo：</h3>
	<div id="yellow">
	<p>#yellow p<br />应该是在上面的</p>
	</div>
	<div id="green">#green<br />IE6/7显示在上面，实际上应该在下面</div>

	</body>
	</html>
No results found