定位元素“消失”或错位，先检查position和z-index冲突：absolute元素依赖最近非static祖先定位，z-index仅在同层叠上下文生效；用outline而非border调试，避免重排；relative元素仍占文档流；fixed元素受父级transform或viewport影响。
定位元素突然“消失”或错位，先检查 position 和 z-index 是否冲突
元素没出现在预期位置，大概率不是代码写错了，而是被其他定位元素盖住，或者脱离了文档流后参照系变了。常见现象是：明明写了 top: 20px，却卡在左上角；或者加了 position: absolute 后整个块不见了——其实是它按最近的 position: relative/absolute/fixed 祖先定位，而那个祖先可能高度为 0 或不可见。
- 用浏览器开发者工具选中该元素，看
Computed面板里position实际生效值，确认没被 CSS 重置或继承覆盖 -
z-index只对定位元素（position不是static）生效，且只在同一个层叠上下文内比较；父容器若设置了opacity、transform或will-change，会创建新层叠上下文，导致子元素的z-index失效 - 临时给父容器加
position: relative（哪怕不设偏移），能快速验证是否因缺少定位上下文导致绝对定位“飘走”
用 outline 而不是 border 查边界，避免触发重排
加边框调试时，如果用 border，可能改变盒模型尺寸，进而影响布局，让问题更难复现。尤其当元素有 box-sizing: content-box 或依赖精确宽高时，border 会让它变大，甚至换行、错位。
- 优先用
outline: 2px solid red—— 它不占空间、不触发重排，只描外轮廓 - 配合
outline-offset: 2px可把描边拉出来一点，更清楚看到定位锚点（比如absolute元素的 top/left 是从哪算起） - 不要全局搜
border: 1px solid替换，有些组件样式依赖 border，临时调试建议只在开发者工具的Styles面板手动添加 outline
relative 定位元素“撑开”父容器，其实是它仍占文档流
很多人以为 position: relative 和 absolute 一样会脱离文档流，结果发现加了 top 后下方元素没上移——这是因为 relative 元素原始占位还在，只是视觉上移动了。这常导致父容器高度异常、滚动条意外出现。
- 检查父容器是否有
height或max-height限制，而子元素的“原始位置”已超出可视区域 - 若想让它真正不占空间，得换
position: absolute，但必须确保父容器有position: relative（或其他非 static 值）作为定位上下文 -
transform: translateY()是替代top的安全方案——它不改变文档流，也不影响其他元素布局，适合纯视觉偏移
fixed 定位元素在滚动时“抖动”或错位，重点查父级 transform 和 viewport 设置
position: fixed 元素本该相对于视口固定，但一旦父元素有 transform、perspective 或 filter，就会创建新的包含块，导致 fixed 行为退化为 relative。
- 在开发者工具里逐级往上 hover 父节点，看是否有样式带
transform:、will-change: transform或filter: - 移动端要注意
meta viewport缩放设置，如user-scalable=no或initial-scale不为 1，会导致 fixed 元素在缩放/滚动时渲染异常 - iOS Safari 对
fixed支持较弱，复杂滚动场景下建议用position: sticky替代，或用 JS 监听scroll动态更新top
最麻烦的情况是多个定位规则嵌套叠加，比如一个 absolute 元素 inside relative 容器 inside transformed 区域——这时 outline 只能帮你看到“现在在哪”，得一层层关掉父级样式才能定位根源。别跳过这步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
