overflow-hidden对absolute子元素无效，因absolute元素的包含块需由relative/absolute/fixed/sticky祖先显式创建，static父容器不构成包含块，故必须将relative与overflow-hidden同加于同一父元素。
因为父容器没设 position: relative，overflow-hidden 就是摆设——Tailwind 不会自动帮你补定位上下文。
为什么 overflow-hidden 对 absolute 子元素完全没反应
浏览器只对「既是包含块、又设置了 overflow-hidden」的元素执行裁剪。而 absolute 元素的包含块，必须由 position 值为 relative、absolute、fixed 或 sticky 的祖先显式创建。默认 static 的父容器根本不算数。
常见现象：
- 你在视觉上“以为”的父容器加了
overflow-hidden，但 DevTools 里看Computed → Containing block，发现它实际相对body定位 - 子元素
top: 0; left: 0却贴到视口左上角，而不是父容器内边距起点 - 父容器有
padding-4，但子元素直接顶穿内边距，像“破框而出”
relative 和 overflow-hidden 必须写在同一层
Tailwind 中不能分开写，比如：
<div class="overflow-hidden">
<div class="relative">
<div class="absolute top-0 right-0">…</div>
</div>
</div>
这样无效。正确写法是：
<div class="relative overflow-hidden"> <div class="absolute top-0 right-0 w-full">…</div> </div>
关键点：
-
relative本身不改变布局，只创建包含块；overflow-hidden依赖这个包含块才能生效 - 子元素必须明确尺寸（如
w-full、max-w-full），否则absolute仍可能按内容自然宽度撑出边界 - 如果父容器高度塌陷（内部只有
absolute子元素），overflow-hidden裁剪对象本身高为 0，此时得补h-40或min-h-[200px]
用 transform 定位时，overflow-hidden 大概率失效
只要子元素用了 translate、scale 或 rotate，就会创建新层叠上下文，导致父级 overflow-hidden 裁剪行为不可靠——尤其在 Safari 和部分安卓 WebView 中。
替代方案：
- 改用
top/left+calc()居中，例如top-1/2 -translate-y-1/2换成top-[50%] translate-y-[-50%]（但注意：后者仍是 transform） - 更稳妥的是用
inset-0+margin-auto配合h-fit控制尺寸 - 若必须动画，把
overflow-hidden上移到该子元素的**直接父容器**，并确保那层有relative
想让下拉菜单、Tooltip“破框而出”，别调 z-index
z-index 只管层叠顺序，不管裁剪。哪怕设成 z-50，只要 DOM 还在被 overflow-hidden 的祖先包裹里，超出部分照样被切掉。
真正有效的做法：
- 用框架的
Portal（React）或Teleport（Vue）把元素挂到body下 - 纯 JS 场景：用
document.body.appendChild()+getBoundingClientRect()动态算位置 - 现代 CSS 可试
overflow-clip（Chrome 119+ / Firefox 111+），但它在 Safari 里基本不可用
最容易被忽略的，是没打开 DevTools 看一眼 Containing block —— 你花十分钟调 z-index 和 transform，不如点开 computed 样式，三秒确认它到底相对谁定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
