调试定位异常时，优先用 outline: 2px solid red; 查看真实边界；检查父级是否设置 position: relative 或触发 BFC 影响包含块；启用盒模型高亮；临时禁用 transform/will-change 排查层叠上下文干扰。
用 outline 临时标记定位元素
当某个元素没按预期显示位置，先别急着改 position 或 top/left，给它加一行 outline: 2px solid red;。outline 不影响布局，能清晰看到元素真实边界和偏移效果，比 border 更适合调试。多个嵌套定位元素时，可逐个加不同颜色 outline 快速识别层级关系。
检查父容器是否触发了 BFC 或相对定位
绝对定位元素的“参考系”是最近的 已定位祖先（position 为 relative/absolute/fixed/sticky）。如果发现 top: 20px 没生效或偏移异常，重点看父级有没有漏写 position: relative。另外，某些样式（如 overflow: hidden、float、display: flow-root）会创建 BFC，间接影响内部绝对定位元素的包含块，需留意。
用浏览器开发者工具“强制显示盒模型”
在 Elements 面板中选中元素，勾选右上角 Layout → Show box model（Chrome/Firefox 均支持），实时查看 margin、border、padding、content 区域，尤其注意 offset parent 的位置和尺寸。鼠标悬停在数值上还能高亮对应区域，快速判断是否被外边距塌陷、浮动干扰或 transform 影响了定位基准。
临时禁用 transform 和 will-change
transform（尤其是 translate、scale）和 will-change 会创建新的层叠上下文和包含块，导致绝对定位元素的参考系意外变更。调试时可在开发者工具中直接取消勾选这些属性，观察位置是否恢复正常。若恢复了，说明问题出在层叠上下文干扰，需调整 transform 使用方式或重设定位祖先。
立即学习“前端免费学习笔记（深入）”；
