CSS- 4.2 相对定位（position: relative）

.element {
  position: relative;
  top: 10px;    /* 向下偏移10像素 */
  left: 20px;   /* 向右偏移20像素 */
  /* 或使用其他方向 */
  /* right: 10px; */
  /* bottom: 10px; */
}

3.特点详解

空间保留

相对定位的元素在文档流中仍然占据其原始位置，只是视觉上看起来移动了。其他元素不会填补它"离开"的空间。
偏移基准

偏移是相对于元素在正常文档流中的位置计算的，而不是相对于父元素或其他元素。
层级提升

相对定位的元素会创建一个新的层叠上下文（stacking context），但不会脱离文档流。

4.实际应用场景

（1）微调元素位置

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.box {
		  width: 100px;
		  height: 100px;
		  background: lightblue;
		  margin: 10px;
		}
		.relative-box {
		  position: relative;
		  top: 20px;
		  left: 30px;
		  background: lightcoral;
		}
		</style>
	</head>
	<body>
		<div class="box">原始位置</div>
		<div class="box relative-box">相对定位</div>
		
		
		
	</body>
</html>

效果：第二个div会向下偏移20px，向右偏移30px，但第一个div不会移动填补这个空间。

（2）作为绝对定位的参考点

相对定位常被用作绝对定位子元素的参考容器：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.parent {
		  position: relative;
		  width: 300px;
		  height: 200px;
		  background: #eee;
		}
		.child {
		  position: absolute;
		  top: 10px;
		  right: 10px;
		  background: #ff0;
		}
		</style>
	</head>
	<body>
		<div class="parent">
		  <div class="child">绝对定位的子元素</div>
		</div>
		
		
	</body>
</html>

在这个例子中，子元素的绝对定位是相对于其相对定位的父元素计算的。

（3）创建视觉效果而不破坏布局

相对定位可以用于创建悬停效果、工具提示等，而不影响页面其他部分的布局。

5.与其他定位方式的比较

定位方式	是否脱离文档流	偏移基准	是否影响其他元素
静态定位(static)	否	无	否
相对定位(relative)	否	元素自身原始位置	否
绝对定位(absolute)	是	最近的已定位祖先元素	是
固定定位(fixed)	是	视口	是
粘性定位(sticky)	混合	视口或最近的滚动祖先	否（通常）

6.注意事项

性能考虑：相对定位的元素仍然参与文档流计算，大量使用可能影响渲染性能
层叠顺序：相对定位的元素会覆盖静态定位的元素（除非设置z-index）
响应式设计：在响应式布局中，相对定位可能需要配合媒体查询调整偏移值
可访问性：过度使用定位可能影响屏幕阅读器的用户体验

7.最佳实践

用于微调元素位置而非主要布局
作为绝对定位元素的定位上下文容器
避免在需要精确控制的响应式布局中过度使用
结合transform属性（如translate()）可能比使用top/left更高效

相对定位是CSS定位系统中一个灵活而强大的工具，特别适合需要微调元素位置而不破坏整体布局的场景。

二、代码实例

代码实例如下：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位-相对定位relative</title>
		<style type="text/css">
			.div1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.div2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				position: relative;
				/* 以原来的位置为基准发生偏移 */
				left: 100px;
				top: -50px;
			}
			.div3 {
				width: 100px;
				height: 100px;
				background-color: green;
			}
			#btn {
				
				position: relative;
				top: 2px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
			<input type="" name="" id="btn" value="" />
		</div>
			<a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>
	</body>
</html>

代码运行：

总结

以上就是今天要讲的内容，本文简单记录了CSS之相对定位，仅作为一份简单的笔记使用，大家根据注释理解

CSS- 4.2 相对定位（position: relative）

系列文章目录

前言

一、理论部分

1.基本概念

2.语法

3.特点详解

4.实际应用场景

（1） 微调元素位置

（2）作为绝对定位的参考点

（3）创建视觉效果而不破坏布局

5.与其他定位方式的比较

6.注意事项

7.最佳实践

二、代码实例

总结

（1）微调元素位置