position（relative）和div的重叠或者遮挡问题

最新推荐文章于 2023-10-01 16:52:41 发布

Mm_Dxx

最新推荐文章于 2023-10-01 16:52:41 发布

阅读量4.6k

点赞数

本文链接：https://blog.csdn.net/Mm_Dxx/article/details/103818704

版权

今天遇到一件怪事情，那就是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/

Mm_Dxx

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
position（relative）和div的重叠或者遮挡问题

今天遇到一件怪事情，那就是position的属性和div的遮挡关系，密切联系。首先说明问题出现的地方：nav是fixed，但是box还是把nav给遮住了，这是为什么呢？首先来看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DE...
复制链接

扫一扫