position: relative 使元素在原位置偏移但仍占文档流空间；2. position: absolute 使元素脱离文档流，相对于最近已定位祖先定位，常用于弹窗等精确布局场景。
在CSS中，通过 position 属性可以控制元素的定位方式，实现相对或绝对布局。这个属性决定了元素如何脱离正常文档流以及它的偏移行为。
1. position: relative（相对定位）
设置 position: relative 后，元素仍保持在正常文档流中，但可以通过 top、bottom、left、right 属性相对于它原本的位置进行偏移。
使用场景：微调元素位置，同时不影响其他元素布局。示例：
.element {
position: relative;
top: 10px;
left: 20px;
}
该元素会从原来的位置向右移动20像素，向下移动10像素，但原来的空间仍然保留。
立即学习“前端免费学习笔记（深入）”；
2. position: absolute（绝对定位）
设置 position: absolute 后，元素完全脱离文档流，不再占据空间，并相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先）进行定位。若没有这样的祖先，则相对于初始包含块（通常是视口）。
使用场景：弹窗、悬浮按钮、精确控制元素位置。示例：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 100px;
}
此时 .child 会相对于 .parent 定位，出现在其内部左上角偏移 (100px, 50px) 的位置。
关键点总结
- relative 不脱离文档流，偏移基于自身原位置。
- absolute 脱离文档流，定位基准是最近的已定位祖先。
- 配合 top / right / bottom / left 使用才能看到定位效果。
- 父级设为 relative，子级用 absolute，是常见“相对父容器定位”技巧。
