父元素未创建定位上下文导致absolute子元素定位失效，根本原因是其position值非relative/absolute/fixed/sticky；必须用开发者工具检查computed中position是否为relative且未被覆盖，同时排除transform、overflow、height为0等干扰因素。
父元素没创建定位上下文
因为 position: absolute 从不认“视觉上的父元素”，只找最近的「已定位祖先」——也就是 position 值为 relative、absolute、fixed 或 sticky 的祖先元素。如果父元素是默认的 static（哪怕你写了 position: relative 但被覆盖了），它就等于不存在，浏览器会继续往上查，直到 body 或初始包含块。
- 用开发者工具选中父元素 → 切到 “Computed” 面板 → 搜索
position，确认值是relative且没被划掉 - 临时加
outline: 2px solid red看父容器是否真渲染出尺寸；如果高度为 0（比如内部全是absolute子项），它逻辑上存在，但视觉上“没框” - 检查是否有全局重置规则，比如
* { position: static !important; }，这种会静默干掉你的声明
父元素被 transform 干扰了定位参考
即使父元素写了 position: relative，只要它或中间某层祖先设置了 transform（哪怕只是 transform: translateZ(0)），就会强制创建新的包含块。此时 absolute 子元素就不再以你写的那个 relative 父元素为基准，而是以这个带 transform 的元素为基准——而它的坐标系可能已被偏移或缩放。
- 逐层向上检查所有祖先的 Computed
transform值，必须是none才安全 - 某些 UI 库、动画组件、CSS-in-JS 工具会悄悄注入
transform: translateZ(0)触发 GPU 加速，非常隐蔽 - 临时注释掉
transform相关样式，看定位是否立刻恢复正常——这是最直接的验证方式
flex/grid 容器不是定位上下文自动体
display: flex 或 display: grid 不会自动让父容器成为定位参照物。很多人误以为“它是容器，所以子元素就该相对它定位”，但 CSS 定位规则完全独立于布局模式。只要父元素还是 position: static，absolute 子元素照样穿透它往上找。
- 必须显式给 flex/grid 父容器加
position: relative，才能让它成为定位上下文 -
justify-content和align-items对absolute子元素完全无效，别指望靠它们调位置 - 父容器设了
relative后，子元素的top/left是从 content box 左上角算起，不是 padding box —— 如果有padding，子元素可能被盖住或挤出可视区
overflow: hidden 看起来像定位失效
父元素加了 position: relative，子元素也正确设置了 top/left，但就是“看不见”——大概率是 overflow: hidden 在裁剪。这不是定位错了，是内容被截掉了。
- 临时把父元素的
overflow改成visible排查 -
overflow: hidden和position: relative可以共存，但要注意两者叠加效果：定位生效了，只是显示被限制 - 如果父容器本身高度为 0，
overflow: hidden会让整个区域不可见，连 border 都不渲染，更难调试
真正卡住人的地方，往往不是没写 position: relative，而是它写了却没生效——被覆盖、被 transform 覆盖、被 height: 0 隐藏、被 overflow 裁掉。调试时优先看 Computed，而不是 Styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
