HTML之相对定位position，relative

最新推荐文章于 2025-05-12 10:53:06 发布

原创最新推荐文章于 2025-05-12 10:53:06 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML之相对定位position，relative

JS 专栏收录该内容

14 篇文章

订阅专栏

本文通过实例解析了HTML中相对定位(position: relative)的使用方法，对比绝对定位，展示了如何将一个div元素相对于其正常位置进行偏移，同时保持其仍占据原有空间的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML之相对定位position，relative 用通俗的话讲就是把一个div块固定于另一个div块上，即覆盖

以上一篇发文绝对定位为参考
https://blog.youkuaiyun.com/qq_44973159/article/details/90812832

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fixed</title>
	</head>
	<style type="text/css">
		#id1{
			width: 400px;
			height: 50px;
			background: springgreen;
			font-family: 华文行楷;
			font-size: 25px;
			float: left;
			position: relative;<--修改为相对定位-->
			margin-left: 50px;<--设置好边距-->
			margin-top: 40px;<--设置好边距-->
		}
		.div1{
			width: 500px;
			height: 900px;
			background: darkturquoise;			
		}
		.div2{
			width: 500px;
			height: 900px;
			background: bisque;
		}
	</style>
	<body>
		<div id="id1">relative相对定位</div>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>