relative定位不影响文档流。元素仍占据原始空间，偏移仅视觉移动，后续元素布局不受影响，父容器高度包含其原始位置高度。
relative 定位是否影响文档流
不影响。position: relative 元素仍保留在正常文档流中，它占据的原始空间不会被其他元素占用，后续元素的布局位置也不受它的偏移影响。
为什么 relative 偏移后还能看到“占位”
因为 relative 只是「视觉上」移动了元素，浏览器仍按它原本的位置（即未加 top/left 等前）计算文档流和盒模型尺寸：
-
top: 20px会让元素向下挪 20px，但原来那块空白还在，下面的元素不会往上顶 - 父容器的
height会包含该元素原始位置的高度，哪怕它已用top移出可视区 - 如果设置了
z-index，只影响层叠顺序，不改变流内位置
relative 和 absolute 在文档流上的关键区别
这是最容易混淆的点：
-
relative：元素仍在流中，偏移不释放空间 -
absolute：元素完全脱离文档流，原始位置被“抹掉”，后续元素会立即填补过去 -
absolute的偏移参考的是最近的position: relative | absolute | fixed祖先，而relative永远参考自身原始位置
实际开发中容易踩的坑
看似简单，但几个典型问题常导致布局错乱：
立即学习“前端免费学习笔记（深入）”；
- 给多个
relative元素设top后发现父容器高度异常高——其实是每个元素都在撑高父容器，即使它们视觉上已重叠 - 误以为
relative能让子元素用absolute相对于它定位，却忘了给父元素显式设置position: relative（否则会向上找，可能跑到 body 上） - 在 Flex 或 Grid 容器里对子项用
relative，偏移有效，但主轴/交叉轴对齐逻辑仍按原始位置计算，容易造成视觉与逻辑错位
