根本原因不是代码写错，而是浏览器未将元素视为可定位元素：position值非法、父容器未创建定位上下文，或被transform/filter等属性改变参照系。
根本原因不是写错了代码，而是浏览器压根没把它当“可定位元素”处理——position 值非法、父容器没创建定位上下文、或被 transform/filter 等属性悄悄劫持了参照系。
检查 position 值是否合法且未被覆盖
浏览器只认 static、relative、absolute、fixed、sticky 这五个值，拼错（如 absoulte）、写错大小写（如 ABSOLUTE）或用了不存在的值（如 center），都会直接降级为 static，等于没写。
- 用开发者工具打开「Computed」面板，搜索
position，确认它显示的是你写的值，且没被划掉 - 检查是否有全局重置规则（比如
* { position: static !important; }）静默覆盖 -
position: sticky必须配合top、bottom等临界值才生效，光写sticky不会“粘”
父容器没设 position: relative 是最常见失效点
position: absolute 的元素不会自动以 HTML 中“看起来是父级”的那个元素为基准，它只找最近的 position 值不为 static 的祖先。如果全都是默认 static，就锚定到视口——于是 top: 0; left: 0 真的贴左上角，和你的容器毫无关系。
- 在开发者工具里选中该元素，看「Computed」面板中的
Containing block显示的是哪个节点 - 临时给所有可疑父级加
outline: 1px dashed #f00，观察哪个框成了实际定位边界 - Flex 容器、Grid 容器不会自动成为定位上下文，必须显式加
position: relative
transform、filter 或 will-change 悄悄换了定位参照系
哪怕父容器写了 position: relative，只要它或中间某层祖先设置了 transform（包括 translateZ(0)）、filter、opacity 或 <code>will-change，就会强制创建新的包含块（containing block）。此时子元素的 top/left 就不再相对于你写的那个 relative 父级，而是相对于这个带 transform 的元素——而它的坐标系可能已被偏移或缩放。
- 逐层向上检查祖先的「Computed」→
transform，必须是none才安全 - 某些 UI 库、动画组件、CSS-in-JS 工具会悄悄注入
transform: translateZ(0)触发 GPU 加速，非常隐蔽 - 临时注释掉相关样式，看定位是否立刻恢复正常——这是最快验证方式
overflow: hidden 看起来像定位失效，其实是裁剪生效
父容器加了 position: relative 和 top/left，但子元素“看不见”，大概率是 overflow: hidden 把它裁掉了。这不是定位失败，是定位成功后被截断了。
- 确认
overflow: hidden是否真的作用在那个Containing block上——不是视觉父级，而是计算出来的定位参考祖先 - 高度塌陷的容器（比如内部全是
absolute子项）即使加了overflow: hidden，也会因高为 0 导致裁剪无从谈起 - 想让下拉菜单、Tooltip “破框而出”，别调
z-index，得把 DOM 移到更高层级（如挂到body下），或用框架的Portal/Teleport
真正麻烦的从来不是语法错误，而是那些“写了却没生效”的隐性干扰：transform 创建的新包含块、UI 库悄悄注入的样式、computed 中被划掉的 position 值——它们不会报错，只会在你反复刷新页面时，默默把你拖进调试深渊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
