CSS定位问题需按参照逻辑、文档流、层叠规则三方面排查：一、“消失”因absolute未设最近非static祖先；二、z-index失效因父级创建新层叠上下文；三、高度塌陷因脱离文档流；四、sticky/fixed异常因容器条件不满足或transform干扰。
遇到CSS定位出问题，别急着改代码，先按这张清单快速排查。多数情况不是写错了，而是没理解定位的参照逻辑或文档流影响。
一、元素“消失”或“飘到屏幕外”
这是绝对定位（absolute）最常踩的坑：父容器没设 position: relative，导致子元素直接锚定到视口，偏移值（如 top: 20px; right: 10px）就从浏览器右上角算起，而不是你预期的卡片右上角。
- 检查该元素的**最近非static祖先**是否存在，且是否设置了 relative / absolute / fixed / sticky
- 用浏览器开发者工具选中元素，看“Computed”面板里的 Containing Block 是谁
- 临时给父容器加个 border: 1px solid red 和 position: relative，立刻验证是否回归预期位置
二、元素重叠但 z-index 不生效
z-index 不是全局排序器，它只在同一个“层叠上下文”内起作用。父元素一旦创建了新的层叠上下文（比如设置了 opacity 、transform、filter 或 will-change），它的子元素再高的 z-index 也压不过同级的其他层叠上下文。
- 检查重叠元素的任意祖先是否触发了新层叠上下文（尤其注意 opacity: 0.99 这类“伪透明”写法）
- 用开发者工具的“Layers”面板（Chrome DevTools → More Tools → Layers）查看实际渲染层级
- 优先调整父容器的 z-index，而非盲目堆高子元素的数值
三、父容器高度塌陷，内容被裁切
当子元素用了 absolute 或 fixed，它就脱离文档流，父容器“看不见”它，自然不会撑开高度——常见于轮播图容器、弹窗包裹层、侧边栏等。
立即学习“前端免费学习笔记（深入）”；
- 如果子元素尺寸固定，直接给父容器设 height 或 min-height
- 如果子元素高度动态，可用 padding-bottom 模拟占位，或用 display: flow-root 触发BFC（比 overflow: hidden 更安全）
- 避免用 overflow: hidden 强行撑高——它可能意外隐藏下拉菜单、Tooltip 等溢出内容
四、sticky 定位不粘、fixed 定位滚动错位
sticky 需要满足两个前提：父容器有明确高度/可滚动区域，且自身有 top/bottom 阈值；fixed 在 iOS Safari 或某些安卓 WebView 中，若父容器设置了 transform 或 perspective，会强制降级为 relative 行为。
- 确保 sticky 元素的父容器有 height 或内部内容足够长以产生滚动
- 检查是否有祖先元素设置了 transform: translateZ(0) 或 will-change: transform ——这些会破坏 fixed 的视口锚定
- 移动端适配时，对 fixed 元素额外加 backface-visibility: hidden 可提升兼容性
定位问题本质是“参照系 + 文档流 + 层叠规则”三者叠加的结果。每次修改前，先问一句：它现在相对于谁定位？还在不在文档流里？处在哪个层叠上下文中？答案清楚了，修复就只是几行代码的事。
