absolute定位失效时，父元素computed position必须是非static（如relative/absolute/fixed/sticky），且需排查transform干扰和全局样式覆盖；flex/grid容器不自动创建定位上下文，仍需显式设position:relative。
position: absolute 定位失效时，先查父元素的 computed position 值
不是“必须是 relative”，而是“必须是非 static”。absolute 子元素只认最近的已定位祖先，即 position 值为 relative、absolute、fixed 或 sticky 的父级。但实践中几乎都用 relative，因为它不改变文档流位置，也不影响布局稳定性。
常见错误现象：top: 0; left: 0 把子元素钉到了视口左上角，而不是父容器内——说明父元素在 computed 中仍是 static。
- 打开开发者工具 → 选中父元素 → 切到 “Computed” 面板 → 搜索
position，确认值是relative且未被划掉（没被!important覆盖或重置规则干掉） - 检查是否有全局样式如
* { position: static !important; }，它会静默废掉你的声明 -
relative不需要写top/left就能生效；写了反而可能意外偏移
父元素设了 relative 却仍不生效？检查 transform 和 overflow
即使 computed position 是 relative，也可能被其他属性干扰：只要父元素或中间任意祖先设置了 transform（哪怕只是 transform: translateZ(0)），就会强制创建新的包含块，导致 absolute 子元素改以该 transform 元素为基准，而非你写的那个 relative 父级。
- 逐层向上检查所有祖先的 computed
transform值，必须是none才安全 - 某些 UI 库、动画组件、CSS-in-JS 工具会悄悄注入
transform: translateZ(0)触发 GPU 加速，非常隐蔽 -
overflow: hidden不影响定位逻辑，但会让子元素“消失”——不是没定位，是被裁掉了；临时改成overflow: visible验证
flex/grid 容器不是天然定位上下文
很多人以为 display: flex 或 display: grid 的父容器“自动成为定位参照物”，这是错的。布局模式和定位上下文完全无关。只要父元素仍是 static，absolute 子元素照样穿透它往上找。
立即学习“前端免费学习笔记（深入）”；
- 必须显式加
position: relative，哪怕它已经是 flex 容器 -
justify-content和align-items对absolute子元素完全无效，别指望靠它们调位置 - 父容器设了
relative后，top/left是从 content box 左上角算起，不是 padding box —— 如果有padding，子元素可能被盖住或挤出可视区
父容器高度塌陷是副作用，不是 bug
relative 父元素仍占据文档流，但一旦它的子元素全用 absolute，父容器就失去高度来源，容易塌成一条线（height = 0）。这不是定位失败，而是预期行为。
- 用
outline: 2px solid red临时查看父容器是否真渲染出尺寸 - 如果内部只有
absolute子项，需手动给父元素设height或用伪元素撑开（如::after { content: ""; display: block; height: 1px; }） - 响应式场景下尤其要注意：内容动态加载后，父容器可能突然塌陷，导致
absolute子元素“掉出”可视区
最常被忽略的点是 transform 干扰和 computed position 被覆盖——这两处问题不会报错，也不会在 Elements 面板里直接标红，只能靠 Computed 面板一层层手动验证。
