我们都知道z-index是表示谁压着谁的意思，那么在实际开发中如何使用z-index呢？
下面我们举一个页面导航的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-top: 60px;
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
}
.inner_c{
width: 980px;
height: 60px;
margin: 0 auto;
margin-left: 50px;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
padding-left: 10px;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.content{
margin: 0 auto;
width: 886px;
}
/*按钮会压住导航，后定位压住先定位的*/
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页新闻</a></li>
<li><a href="#">网页游戏</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">网页设置</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
<div class="content">
<img src="images/manor-1.jpg" alt="" />
<p>
<a href="" class="btn">按钮</a>
</p>
<img src="images/manor-1.jpg" alt="" />
<img src="images/manor-1.jpg" alt="" />
</div>
</body>
</html>
运行结果：
大家可以看到页面的最上方是一个导航条，内容部分是2张同样的图片，我们在第一行图片下方设置了一个链接。由css代码我们可以看到导航nav设置的固定定位，按钮链接设置了相对定位，我们知道设置定位的元素，会出现后面的元素压住前面的元素。当我们向上滑动页面，可以看到如下图的现象：
内容为按钮的链接会穿过导航条，这显然是不正确的，原因就会因为链接会压住导航条，那该如何解决这种问题呢？
其实很简单，只需要设置导航条nav的z-index值即可，我们可以给他设置一个很大的z-index值，这样就可以压住其他元素了。为.nav添加样式
z-index: 99999999;
这样就不会出现刚才的现象了。
1685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
