什么时候使用z-index？

来源：互联网发布：tomcat启动数据库报错编辑：程序博客网时间：2024/06/05 18:12

我们都知道z-index是表示谁压着谁的意思，那么在实际开发中如何使用z-index呢？

下面我们举一个页面导航的例子

<!DOCTYPE html>

<head>

<title>Document</title>

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;

}

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>

<ul>

</ul>

</div>

<p>

</p>

</div>

</body>

</html>

运行结果：

大家可以看到页面的最上方是一个导航条，内容部分是2张同样的图片，我们在第一行图片下方设置了一个链接。由css代码我们可以看到导航nav设置的固定定位，按钮链接设置了相对定位，我们知道设置定位的元素，会出现后面的元素压住前面的元素。当我们向上滑动页面，可以看到如下图的现象：

内容为按钮的链接会穿过导航条，这显然是不正确的，原因就会因为链接会压住导航条，那该如何解决这种问题呢？

其实很简单，只需要设置导航条nav的z-index值即可，我们可以给他设置一个很大的z-index值，这样就可以压住其他元素了。为.nav添加样式

z-index: 99999999;

这样就不会出现刚才的现象了。

0 0