position: absolute 元素超出父容器不是 bug，而是因父容器未设 position: relative 导致其定位参考系向上回溯至 body 或视口；此时 overflow: hidden 无效，因父容器高度塌陷且未形成包含块。
position: absolute 元素超出父容器，不是 bug，是 CSS 定位机制的必然结果——它根本没打算“听”父容器的话。
父容器没设 position: relative，就等于没挂牌子
- 浏览器找定位参考时，只认
position值为relative、absolute、fixed或sticky的祖先，static（默认值）直接被跳过 - 如果父容器没加
position: relative，absolute子元素会一路往上，最终以body或视口为参考系 - 此时你在父容器上写
overflow: hidden，纯属贴错位置：裁剪对象根本不是它
用 DevTools 看一眼选中元素的 Computed → Containing block，立刻能确认它到底相对谁定位。
父容器高度塌陷，裁剪无从谈起
- 所有子元素都是
absolute，意味着它们全部脱离文档流 - 父容器失去内容撑高依据，计算高度变成
0 - 即使写了
overflow: hidden，也等于在一张“看不见的纸”上画框——没尺寸，就没裁剪范围
常见表现：
- 父容器背景色/边框消失
-
overflow: hidden像没生效，其实它生效了，只是裁了个空盒子
解决方向不是调 z-index 或改 transform，而是给父容器明确高度（如 height: 200px）、最小高度（min-height），或换布局方式（display: flex / grid）让它自动撑开。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 和 position: relative 必须写在同一层
- 把
overflow: hidden加在祖父级、兄弟容器，甚至用 Tailwind 写成class="overflow-hidden relative"但顺序错乱，都可能失效 - 正确写法必须是同一选择器内同时声明：
.parent { position: relative; overflow: hidden; }
注意：width: 100% 或 max-width 往往也要配着写，否则仅靠 top/left 定位，子元素仍可能因内容过长而溢出边界。
真正容易被忽略的，是开发者工具里那个 Containing block 显示的参考节点——它不骗人，也不管你代码里“看起来像父级”的结构。
