父容器未设position: relative是absolute元素“飞走”的主因；其会向上查找定位上下文直至body或html，导致定位错乱；应始终为直接父容器显式设置position: relative以建立可靠包含块。
父容器没设 position: relative 就用 position: absolute
这是最常导致“元素飞走”的原因。子元素设了 position: absolute，但父容器既没设 position: relative，也没设 absolute 或 fixed，浏览器就会一路往上找，直到 甚至 ——结果就是弹窗贴左上角、下拉菜单飘到页面顶部、图片覆盖层错位。
实操建议：
- 只要用了
position: absolute，就立刻检查它的**直接父容器**是否显式声明了position: relative（哪怕它本身不需要偏移） - 别依赖
body当定位参考：它可能被重置样式影响（比如margin: 0缺失），或在某些框架里被动态修改 - 用浏览器开发者工具看
computed面板里的offsetParent，一眼就能确认当前参考容器是谁
top/left 和 translate(-50%, -50%) 混用出偏移
想居中？很多人写 top: 50%; left: 50%; transform: translate(-50%, -50%) 是对的；但如果同时又加了 margin-top: -20px 或 top: 45%，位移就会叠加，最终位置不可控。
实操建议：
- 居中只用一套逻辑：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 它不依赖宽高，也不受 margin 折叠干扰 - 如果元素还带
scale()或rotate()，必须合并进同一个transform声明，比如transform: translate(-50%, -50%) scale(1.1)，否则后写的会覆盖前写的 - 避免在同一个元素上既用
top/left又手动算margin调整，CSS 计算优先级容易打架
绝对定位元素导致父容器高度坍缩
一旦子元素设成 position: absolute，它就彻底脱离文档流，父容器不再把它当“有高度的成员”。常见现象是：父 <div> 看起来空了、背景色没了、下面的兄弟区块直接顶上来。
<p>实操建议：</p>
<ul>
<li>如果父容器需要视觉高度，不要靠子元素撑开，而是显式设 <code>min-height 或用伪元素占位（如 ::after { content: ""; display: block; height: 300px; }）
position: absolute 往往不是最优解——考虑改用 flex 或 grid，它们天然响应内容outline: 1px solid red 到父容器，能快速判断是不是高度塌陷导致的“消失”混用 position: relative 和 position: absolute 时 z-index 失效
明明写了 z-index: 999，还是被盖住？大概率是层叠上下文断了。比如父容器没设 z-index，或者某个中间祖先元素意外创建了新层叠上下文（比如设了 opacity: 0.99 或 transform）。
实操建议：
-
z-index只在同一个层叠上下文中生效。要压过隔壁区块，得确保你的整个“浮层链”都在同一上下文里，而不是被某层relative+z-index截断 - 避免无意义地给每个
absolute元素都设z-index；优先统一控制父容器的z-index，子元素默认继承 - 移动端尤其注意：
transform、opacity、filter都会隐式创建层叠上下文，可能让预设的z-index失效
