绝对定位元素脱离文档流是 css 的确定行为，导致父容器高度塌陷、定位基准偏移等问题；解决需通过设置父级 position: relative、手动撑高或重构布局等方式干预。
绝对定位元素脱离文档流不是 bug，是 CSS 的确定行为；你没法“阻止”它脱离，只能控制它脱离后带来的影响——比如父容器高度塌陷、子元素飞到页面左上角、后续内容被遮盖。
为什么 position: absolute 会让父容器高度变成 0？
因为浏览器在计算父容器高度时，只看还留在文档流里的子元素。position: absolute 元素被完全剔除出流，不参与任何尺寸计算。哪怕它视觉上占满整个父容器，父容器的 offsetHeight 仍可能是 0。
- 常见场景：
<nav></nav>里所有子项都设了position: absolute→<nav></nav>高度为 0，背景色/边框消失 - 如果父容器本身没设
height或min-height，又没其他流内内容撑开，就会直接“看不见” -
overflow: hidden或display: flow-root对它无效——这些只对float生效，不修复absolute塌陷
怎么让 top/left 相对于父容器而不是
关键在「定位上下文」（containing block）：position: absolute 元素的 top/left 默认不认父 <div>，而是找最近一个 <code>position 不为 static 的祖先。如果父级没设，就一路往上找到 。
- 必须给父容器加
position: relative（哪怕不写top/left） - 注意：父级若带
transform、filter或will-change，也会意外创建新的 containing block，导致定位基准偏移 - 不要用
position: static+top—— 这些属性会被忽略，毫无效果
父容器要撑开高度，又必须用绝对定位怎么办？
没有纯 CSS 方案能自动回填高度。你得选一种干预方式，每种都有适用边界：
- 固定高度场景：直接给父容器设
height或min-height，简单但不响应式 - 动态高度场景：用 JS 读取绝对定位子元素的
offsetHeight，再赋值给父容器style.height；需监听resize和 DOM 变更（如内容展开/收起） - 重构布局：把原本靠
absolute实现的覆盖层，换成position: sticky+z-index，或用flex容器配合align-self控制位置——不脱离流，但无法跨视口定位
position: fixed 在滚动时抖动或被裁剪？
position: fixed 虽然相对于视口，但它仍受父级 overflow 和 transform 影响。尤其在移动端 Safari 或嵌套 transform 容器中，容易出现异常。
- 被
overflow: hidden父容器意外裁剪？加transform: translateZ(0)或contain: layout缓解 - 滚动抖动？检查是否同时写了
top和bottom（冲突，只生效top），或父级有scale()类变换 - fixed 元素不随页面滚动？确认它没被包裹在
transform/filter容器内——这些会重定义 containing block，让它“卡住”
真正难处理的不是怎么让它脱离，而是脱离之后，哪些地方还在依赖它原本占的位置：父容器高度、兄弟元素顺序、可访问性焦点流、响应式断点下的表现……这些隐含契约全得手动校准。
