父容器“失效”指高度塌陷、定位上下文丢失或子元素溢出，本质是 absolute 脱离文档流且只认最近已定位祖先；验证用 DevTools 查 offsetParent，修复需同步设置 position 和动态 min-height。
父容器“失效”通常指高度塌陷、定位上下文丢失或子元素溢出不可控——这不是 CSS bug，而是 position: absolute 的规范行为：它让元素脱离文档流，同时将定位锚点交给最近的「已定位祖先」。修复的关键是主动控制高度责任和定位上下文，而不是试图“阻止脱离”。
怎么确认父容器是不是真被跳过了定位上下文？
绝对定位元素不认你写的“父 div”，只认最近的 position: relative / absolute / fixed / sticky 祖先。常见误判：
- 你以为的父容器只是个普通
<div>，position是默认的static→ 它不会成为定位上下文 - 嵌套在
<table>或display: flex容器里，<td>或flex item默认不是定位上下文，必须显式加position: relative - 祖先元素有
transform、filter或will-change→ 多数浏览器会悄悄创建新 containing block，导致锚点偏移
验证方法：DevTools → Elements → 选中该 absolute 元素 → Computed 面板下拉看 offsetParent 是谁。如果是 body 或 html，说明中间所有父级都“没生效”。
父容器高度为 0 怎么补？别硬设 height
height: 100% 或 min-height: 300px 在响应式场景下极易错位；直接写死 style.height 会截断后续内容。真正要的是：动态反映 absolute 子元素在视觉上占据的**最大底部坐标**。
立即学习“前端免费学习笔记（深入）”；
- 用
ResizeObserver监听每个absolute子元素（不是父容器），回调中调用getBoundingClientRect() - 计算所有子元素的
rect.bottom最大值，再减去父容器自身的rect.top - 把结果写入父容器的
style.minHeight（不是height），保留自然溢出能力 - 注意：若子元素用了
transform: scale()，getBoundingClientRect()已含缩放，无需额外换算
为什么 overflow: hidden 会让 absolute 元素突然消失？
规范说 overflow: hidden 不裁剪 position: absolute 元素，但实际中它常触发浏览器创建新的 stacking context 或 BFC，尤其在嵌套 transform 或移动端 Safari 下，absolute 元素可能被意外截断。
- 临时排查：DevTools 里禁用父容器的
overflow: hidden，看元素是否重现 - 替代方案：改用
contain: layout或transform: translateZ(0)触发硬件加速，同时避免裁剪 - 更稳妥的做法：删掉
overflow: hidden，改用max-height+transition控制展开/收起
点击按钮没反应？大概率是 invisible overlay 挡住了
一个透明的 #options-container 设了 position: absolute; top: 0%; width: 100%; height: 100%，就会像一张玻璃纸盖在整个页面上——鼠标事件全被它捕获，下方按钮完全失活。
- 检查 DOM 结构：有没有一个宽高占满的
absolute父容器，位置恰好压在交互区域上方 - 快速验证：DevTools 里临时加
pointer-events: none到疑似遮挡层，看按钮是否恢复响应 - 修复原则：要么调整它的
z-index低于工具栏，要么改用position: relative+margin-top实现布局，彻底避免覆盖
最易被忽略的点：定位上下文和高度计算必须同步验证。比如你给父容器加了 position: relative 解决了定位偏移，但忘了处理高度塌陷，结果内容还是被裁掉——两个问题表面无关，实则共生于同一套 DOM 层级逻辑中。
