absolute元素“飞了”是因为父容器未设position: relative，导致其向上寻找最近已定位祖先，若无则以视口为参考；修复需显式给父容器设position: relative并确认dom层级及containing block。
父容器没设 position: relative，absolute 元素就“飞了
这是最常见也最容易被忽略的根源。position: absolute 的元素不会以直接父级为参考，而是往上找「最近的已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的祖先。如果没找到，就退到初始包含块（通常是视口），于是 left: 200px 就真从浏览器左边缘起算，而不是你写的那个 .parent 左边缘。
修复方式很简单但必须显式写：
- 给父容器加
position: relative（哪怕它原本没定位需求） - 确认这个父容器确实是 DOM 上的直接父级，不是被
float或display: inline-block隐式干扰的“视觉父级” - 用开发者工具选中 absolute 元素，在 Computed 面板里看
containing block是不是你预期的那个元素；如果不是，说明中间有更近的已定位祖先在“截胡”
overflow: hidden 对 absolute 元素失效？检查包含块是否成立
overflow: hidden 只对「属于该容器包含块」的 absolute 元素生效。如果父容器没设 position，或者设置了但被 transform/filter/opacity
实操要点：
- 父容器必须同时满足：
position: relative（或其它非 static）+overflow: hidden（或auto、scroll） - 避免在父级或其祖先上使用
transform、filter、opacity: 0.99——这些会强制新建层叠上下文，导致 overflow 裁剪行为异常 - 现代项目可试
overflow: clip（Chrome 94+、Firefox 99+），它比hidden更轻量，不触发滚动机制，但兼容性需兜底
元素宽高不确定时，纯 CSS 很难兜住溢出
下拉菜单、Tooltip、气泡框这类组件，内容长度常动态变化，right: 0 在窄屏下可能直接把整个框推到屏幕外，width: 100% 也救不了——因为父容器宽度固定，而文字撑开后实际需要更多空间。
此时必须用 JS 边界检测：
- 调用
el.getBoundingClientRect()获取相对于视口的真实坐标（left、right、top、bottom） - 对比
right > window.innerWidth判断右溢出，bottom > window.innerHeight判断下溢出 - 修正优先用“向内偏移”：比如右溢出时，改
right: 0为left: auto; right: 0，再设left: max(0, window.innerWidth - el.offsetWidth) - 务必在
resize事件里重新检测，但要用throttle包裹；若弹层随滚动重定位，也要监听scroll（注意节流）
父容器高度塌陷导致 overflow 失效
当父容器内部只有 absolute 子元素，没有其他文档流内容时，它的高度会塌成 0 —— 这时即使写了 overflow: hidden，也没“块”可裁，子元素直接按视口定位渲染，看起来像完全失效。
解决方法取决于场景：
- 如果父容器本该有高度，补上明确值：
height: 200px或min-height: 100vh - 如果要自适应内容高度，改用
display: flow-root（推荐）或display: flex，它们能自然包裹浮动和绝对定位元素，避免塌陷 - 慎用
overflow: hidden强制 BFC：它可能意外裁掉box-shadow、下拉菜单或弹层，副作用比flow-root大得多
真实问题往往不是单一原因。比如一个右上角通知框飞出屏幕，可能是父容器没 position: relative，又叠加了 transform 导致裁剪失效，再加上窗口缩小时没做 JS 校准——得一层层查 containing block、检查层叠上下文、再补边界逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
