position: absolute 和 fixed 元素脱离文档流是 CSS 规范定义的行为，不参与空间分配，导致父容器高度塌陷；relative 保留占位，absolute 则彻底解耦定位与布局。
因为 position: absolute 和 position: fixed 在 CSS 规范中被明确定义为「out-of-flow」元素——它们不参与布局计算，浏览器在分配空间时直接跳过它们。
脱离文档流不是 bug，是规范行为
文档流本质是一套空间分配协议：块级元素自上而下、行内元素自左向右，按 HTML 顺序逐个分配位置和尺寸。一旦元素设为 position: absolute 或 position: fixed，它就从这套协议里注销了——offsetHeight 可能为 0，getBoundingClientRect() 返回的位置也不影响父容器高度计算。
- 父容器所有子元素都用
position: absolute？那它的高度就是 0，DevTools 里height: auto也会塌成一条线 -
visibility: hidden元素仍占位，display: none连渲染树都不进，而absolute元素还在渲染树里，只是“隐身”参与布局 - 这不是浏览器实现差异，而是所有主流引擎（Blink、Gecko、WebKit）严格遵循的 CSS2.1 和 CSS Positioned Layout 规范
为什么 relative 不脱离，absolute 却必须脱离？
position: relative 的作用只是「偏移自身，但保留原始占位」；而 position: absolute 的设计目标就是「彻底解耦定位与布局」——它需要自由地锚定到任意祖先，甚至视口，如果还占着文档流位置，就会和正常流内容冲突，无法实现模态框、下拉菜单这类强定位需求。
- relative 元素仍响应
grid-column、flex-grow等布局属性；absolute 元素一加就失效 - relative 不创建新层叠上下文（除非显式设
z-index），absolute 默认就创建 - relative 的
top/left是相对于自己原本位置的偏移；absolute 的top/left是相对于定位上下文边界的绝对坐标
常见误判：以为 transform 也脱离文档流
transform: translate() 不会让元素脱离文档流——它只改视觉位置，原文档流占位（空白区域）仍在。你拖一个 transform 元素，下面的文字不会上移；但拖一个 absolute 元素，下面文字立刻顶上来。
- 错觉来源：两者都能“移动”，但底层机制完全不同：
transform是渲染层操作，position: absolute是布局层剔除 -
transform会强制创建新包含块，导致子元素的position: absolute参考系突变——这常被误认为是“脱离流传染” - 用 JS 获取
offsetWidth时，transform: scale(2)后值不变；但absolute元素若没设width，offsetWidth就是内容撑开的实际宽度
真正麻烦的是定位上下文丢失
脱离文档流本身不可怕，可怕的是你忘了它必须依附一个定位上下文。没有 position: relative 的父容器，absolute 元素就直奔 或视口，滚动、缩放、响应式时全乱套。
- 父容器用了
position: absolute？它自己已脱离流，不能当子元素的定位上下文（除非它上面还有已定位祖先） -
inset: 0写起来简洁，但它依赖父容器有明确的定位上下文边界；IE 和旧 Safari 不支持，降级要写top: 0; right: 0; bottom: 0; left: 0 - Grid/Flex 容器里混用
absolute，别指望grid-area生效——先确认是否真需要脱离流，还是用justify-self+transform更安全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
