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 更适合独立定位。
基本上就这些。这两个属性看起来简单，但在实际开发中很容易因为理解不到位而出错，尤其是在复杂布局中。
暂无评论内容