CSS- 4.2 相对定位（position: relative）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.1 浮动（Float）
CSS- 4.2 相对定位（position: relative）
目录
系列文章目录
前言
一、理论部分
1.基本概念
2.语法
3.特点详解
4.实际应用场景
（1） 微调元素位置
（2）作为绝对定位的参考点
（3）创建视觉效果而不破坏布局
5.与其他定位方式的比较
6.注意事项
7.最佳实践
二、代码实例
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、理论部分
相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。
1.基本概念
相对定位的元素会：
- 保留原始空间：元素在文档流中仍然占据原来的位置
- 相对于自身偏移：通过
top、right、bottom、left属性相对于其正常位置进行偏移 - 不影响其他元素：其他元素会像该元素仍在原位置一样进行布局
2.语法
css
.element {position: relative;top: 10px; /* 向下偏移10像素 */left: 20px; /* 向右偏移20像素 *//* 或使用其他方向 *//* right: 10px; *//* bottom: 10px; */
}3.特点详解
-
空间保留
相对定位的元素在文档流中仍然占据其原始位置，只是视觉上看起来移动了。其他元素不会填补它"离开"的空间。 -
偏移基准
偏移是相对于元素在正常文档流中的位置计算的，而不是相对于父元素或其他元素。 -
层级提升
相对定位的元素会创建一个新的层叠上下文（stacking context），但不会脱离文档流。
4.实际应用场景
（1） 微调元素位置
<!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）作为绝对定位的参考点
相对定位常被用作绝对定位子元素的参考容器：
<!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定位系统中一个灵活而强大的工具，特别适合需要微调元素位置而不破坏整体布局的场景。
二、代码实例
代码实例如下：
<!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之相对定位，仅作为一份简单的笔记使用，大家根据注释理解