今天遇到一件怪事情,那就是position的属性和div的遮挡关系,密切联系。
首先说明问题出现的地方:
nav是fixed,但是box还是把nav给遮住了,这是为什么呢?
首先来看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DECAUMENT</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 44px;
background-color: pink;
position: fixed;
top: 0;
left: 0;
}
.box {
width: 1002px;
height: 1760px;
margin: 44px auto 0;
position: relative; //这是问题所在
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="box">
<img src="../images/box.png" alt="">
</div>
</body>
</html>
分析:原来是这个position:relative; 产生问题。
nav的position属相是fixed;属于动态定位中的固定定位。
遮挡背景图relative是动态定位中的相对定位。而根据同辈元素定位方式相同且无z-index设置时,html靠后者居上。
所以靠后的div会遮挡住前面的。
解决方法:
- 把nav的z-index调节至999就可以解决遮挡问题。
- 把box盒子的position:relative;去掉也可以解决该问题。
注:CSS里position不同属性之间的用法和含义:
http://www.barelyfitz.com/screencast/html-training/css/positioning/