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

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

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

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

CSS- 4.5 css + div 布局 & 简易网易云音乐官网布置实例

CSS- 4.6 radiu、shadow、animation动画

CSS- 5.1 Transition 过渡

系列文章目录

前言

一、理论部分

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>

代码运行：