定位失效的根源是祖先元素创建新包含块或层叠上下文，首要排查transform、will-change、position: relative缺失及overflow/opacity等隐式层叠因素。
定位失效不是position写错了，而是它被祖先元素“劫持”了定位上下文。找到那个偷偷改了包含块的父级，问题基本就解了一半。
检查祖先元素是否设置了 transform 或 will-change
这是position: fixed突然不贴视口、position: absolute偏移错乱的头号原因。只要父级有transform: translateX(10px)、scale(0.95)或will-change: transform，它就会创建新包含块，fixed元素就不再相对于视口，absolute元素也不再以你预期的父容器为锚点。
- 用开发者工具逐级展开父节点，在Styles面板里搜
transform、will-change、perspective - 临时取消勾选这些属性，看定位是否立刻恢复正常
- 修复方式不是删掉它们，而是把需要定位的元素（比如弹窗、提示条）移出该父级结构，挂到
body下；在React可用createPortal，Vue可用<teleport to="body"></teleport>
确认父容器有没有 position: relative 且高度可算
position: absolute必须依赖最近的非static祖先。如果父容器是Flex或Grid布局但没显式设position: relative，浏览器会跳过它继续往上找——可能直接落到body，导致元素飞走。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查目标元素的
offsetParent（开发者工具 → Elements → 右键 → “Scroll into view”后看Computed里的offsetParent） - 给直接父容器加
position: relative，它本身不改变布局，纯属“建锚点” - 如果父容器是Flex且内部只有absolute子项，记得设
height或min-height（比如min-height: 100vh），否则它的计算高度为0，top: 50%就等于top: 0
排查 overflow 和 z-index 层叠上下文干扰
overflow: hidden会让absolute/fixed元素被裁剪；而opacity、transform、filter哪怕只是opacity: 0.99，都会创建新层叠上下文，让z-index只在内部生效——你调再高也盖不过兄弟容器里的元素。
- 临时删掉祖先的
overflow: hidden或改成overflow: visible，看是否显示出来 - 检查是否有父级用了
opacity、filter: blur(0.5px)或transform: translateZ(0)，这些都隐式创建层叠上下文 - 不要全局加
z-index: 9999，先确认所有相关父容器是否处于同一层叠上下文；必要时给它们统一加position: relative和相同z-index
调试时别用 border，改用 outline
border会改变盒模型尺寸，可能让原本错位的问题变得更难复现；outline不占空间、不触发重排，是定位调试的黄金搭档。
- 在开发者工具Styles面板手动加：
outline: 2px solid red，配合outline-offset: 2px能看清偏移起点 - 多个嵌套定位元素时，用不同颜色区分：
outline: 2px solid blue、outline: 2px solid green - 别全局替换CSS里的
border，有些组件样式依赖它，只用于临时验证
真正卡住人的，往往不是语法错误，而是某个被忽略的祖先节点悄悄改写了包含块或层叠上下文。每次定位异常，优先查三层：最近的transform、最近的position: relative、最近的overflow或opacity——这三处修完，八成问题就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
