定位布局（relative）相对定位

最新推荐文章于 2023-07-18 18:18:06 发布

weixin_44869420

最新推荐文章于 2023-07-18 18:18:06 发布

阅读量526

点赞数

本文链接：https://blog.csdn.net/weixin_44869420/article/details/99111248

版权

本文深入探讨了CSS中的相对定位（relative），解释了`position: relative;`的工作原理，以及如何使用它来调整元素在页面上的位置。通过实例，展示了相对定位如何影响元素及其子元素的布局，并讨论了它与其他定位方式（如absolute和fixed）的区别。了解相对定位对于创建复杂而响应式的网页布局至关重要。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>relative</title>
	<style>
		.outer{ 
			background-color: #ccc;
		}
		.outer > div { 
			height: 100px;
			
		}
		.outer > div.one {
			background-color: lightblue;
		}
		.outer > div.two {
			background-color: pink;
			/*不脱离文档流*/
			position: relative;
			/*距离one以下50像素*/
			top:50px;
			left:50px;
**/*			z-index: 1;*/**
		}	

		.outer > div.three {
			background-color: teal;
			position: relative;
		}
	</style>
</head>
<body>
		<div class="outer">
		 	<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>
</body>
</html>

在没加z-index: 1; 之前
加了z-index: 1; 之后