admin管理员组文章数量:1611185
今天遇到一件怪事情,那就是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/screencast/html-training/css/positioning/
版权声明:本文标题:position(relative)和div的重叠或者遮挡问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728605952a1165455.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论