相对定位不脱离文档流详解

一分耕耘，一分收获！既然都打开这篇《相对定位不会脱离文档流》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

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，偏移有效，但主轴/交叉轴对齐逻辑仍按原始位置计算，容易造成视觉与逻辑错位

真正要注意的不是“它有没有脱离”，而是“它有没有被当作一个‘空占位符’继续参与布局计算”——relative 一直都在参与。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~