关于position的层级

在层级比较多的页面中，经常会出现被遮盖的情况。下面用实例来讲讲这个问题的解决方法。

其实宗旨就一条：第一个父元素的层级一定要比第二个父元素的层级要高。

先看一下不如意的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>tab</title>
		<style>
		.f1,.f2{
			border:1px solid #e5e5e5;
			position:relative;
			height:30px;
			margin-top:10px;
			width:80px;
		}
		.f2{margin-left:80px;}
		.f2{background-color:#00f;}
		#c1{background-color:#0f0;}
		#c2{background-color:#f00;}
		#c1,#c2{
			border:1px solid #ccc;
			height:50px;
			position:absolute;
			left:0;
			top:20px;
			width:100px;
		}
		</style>
	</head>
	<body>
		<div class="f1">
			父级元素1
			<div id="c1">
			子级元素1
			</div>
		</div>
		<div class="f2">
			父级元素2
			<div id="c2">
			子级元素2
			</div>
		</div>
	</body>

</html>

不如意的显示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>tab</title>
		<style>
		.f1,.f2{
			border:1px solid #e5e5e5;
			position:relative;
			height:30px;
			margin-top:10px;
			width:80px;
		}
		.f1{z-index:100;}
		.f2{margin-left:80px;z-index:90;}
		.f2{background-color:#00f;}
		#c1{background-color:#0f0;}
		#c2{background-color:#f00;}
		#c1,#c2{
			border:1px solid #ccc;
			height:50px;
			position:absolute;
			left:0;
			top:20px;
			width:100px;
		}
		</style>
	</head>
	<body>
		<div class="f1">
			父级元素1
			<div id="c1">
			子级元素1
			</div>
		</div>
		<div class="f2">
			父级元素2
			<div id="c2">
			子级元素2
			</div>
		</div>
	</body>

</html>

正确显示结果

总结：无论想要得到什么样的效果，只要你把需要放在最上层的元素的父级元素（及设置position：relative）的z-index值设置成最大的就可以了

posted on 2012-04-05 18:34 小落落阅读(2209) 评论(0) 收藏举报