在层级比较多的页面中,经常会出现被遮盖的情况。下面用实例来讲讲这个问题的解决方法。
其实宗旨就一条:第一个父元素的层级一定要比第二个父元素的层级要高。
先看一下不如意的代码
<!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值设置成最大的就可以了