CSS进阶必看！position:absolute和relative的区别，搞懂就是布局大佬！

本篇文章给大家分享《CSS进阶：position:absolute和relative有啥区别？搞懂就能逆袭布局高手！》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

position: relative 是原地偏移且保留文档流，而 position: absolute 是脱离文档流的绝对定位。1. position: relative 元素仍占据原有空间，偏移基于自身原位置，常用于微调布局或作为 absolute 元素的定位参考；2. position: absolute 元素脱离文档流，不保留原有空间，定位基于最近的非 static 定位祖先元素，适合需要独立定位的场景；3. 使用时需注意：absolute 元素必须指定 top、left 等值，且其父容器最好设置为 relative 等定位方式以控制定位范围，同时通过 z-index 可调节堆叠层级。

在网页布局中，position: absolute 和 position: relative 是两个常用的定位方式，它们虽然都属于定位属性，但行为和使用场景差异很大。理解它们的区别，能帮助你更精准地控制元素的位置。

position: relative 是“原地偏移”

设置 position: relative 的元素，仍然保留在文档流中原本的位置。你可以通过 top、bottom、left、right 属性让它相对于自己原来的位置进行偏移，但不会脱离文档流，也不会影响其他元素的布局。

举个例子：

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

这个 .box 元素会从它原本的位置向下移动20px，向右移动30px，但它原来的空间依然保留，其他内容不会填补它原来的位置。

常见用途包括：

• 微调元素位置而不影响整体布局
• 作为 absolute 定位子元素的“参考点”

position: absolute 是“脱离文档流的绝对定位”

一旦设置了 position: absolute，元素就会完全脱离文档流，不再占据原来的空间。它的位置是相对于最近的设置了非 static 定位的祖先元素来确定的。如果没有这样的祖先，它就会一直向上找，直到视口或某个固定定位的祖先为止。

例如：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  left: 20px;
}

在这个例子中，.child 会以 .parent 为参考点，出现在距离父元素上边10px、左边20px的位置。

需要注意的几点：

• 脱离文档流后，不影响其他元素布局
• 必须明确指定 top、left 等值才能生效
• 如果没有定位过的祖先元素，可能会跑到页面意想不到的位置

使用时的一些小技巧

• 想让一个 absolute 元素在某个容器内定位？那这个容器必须设置成 relative、absolute、fixed 或 sticky。
• 多层嵌套定位时，注意层级关系，可以通过 z-index 控制堆叠顺序。
• relative 更适合微调，absolute 更适合独立定位。

基本上就这些。这两个属性看起来简单，但在实际开发中很容易因为理解不到位而出错，尤其是在复杂布局中。

到这里，我们也就讲完了《CSS进阶必看！position:absolute和relative的区别，搞懂就是布局大佬！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,position的知识点！