CSS中position属性absolute和relative的区别

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;
}