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

最新推荐文章于 2021-11-05 17:06:41 发布

原创最新推荐文章于 2021-11-05 17:06:41 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文详细解析了在网页布局中，使用CSS position属性时遇到的元素遮挡问题。通过一个具体的例子，阐述了fixed和relative定位下，元素的层级关系及如何通过调整z-index属性来解决遮挡现象。

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