绝对定位元素被裁剪的关键在于父容器是否同时具备定位上下文（非static）和裁剪权限（overflow:hidden等），二者缺一不可；若父为static，定位参考会上溯，此时在视觉父级设overflow无效。
绝对定位元素被裁剪，不是它“太出格”，而是父容器悄悄成了它的“牢笼”——关键在它是不是那个真正的“定位参考祖先”，以及这个祖先有没有同时具备裁剪权限。
确认谁才是实际的包含块
浏览器不会按DOM层级“认爹”，而是找最近的已定位祖先（position值为relative、absolute、fixed或sticky）。如果父容器仍是默认的static，子元素会一路往上跳，甚至落到body上。此时你在视觉父级加overflow: hidden，等于锁错了门。
用浏览器DevTools打开Computed面板，查看选中元素的Containing block一栏，一眼就能看到它到底相对谁定位。也可以临时给疑似祖先加outline: 1px solid red，快速验证边界归属。
裁剪生效必须两个条件同时满足
只加overflow: hidden没用；只加position: relative也不行。真正起作用的是两者的组合：
- 父容器设position: relative（或其他非static值），创建定位上下文（containing block）
- 同一父容器上设overflow: hidden（或auto/scroll），浏览器才以它的内边框为界裁剪所有后代内容
- Tailwind中要写成relative overflow-hidden，缺一不可
高度塌陷会让裁剪“无处下手”
如果父容器里全是absolute子元素，它会坍缩为height: 0。这时候overflow: hidden还在，但容器本身几乎不存在，自然裁不出效果。
解决方式分两类：
- 给父容器设明确尺寸：比如h-40、min-h-24、min-h-[200px]——避免依赖h-full或flex-1，它们需要父级已有高度
- 改用flex或grid布局：它们能自动撑高，但注意——flex/grid容器本身也会成为包含块，仍需显式加relative才能让裁剪按预期工作
想让它“破框而出”，别调z-index，要动结构
z-index再高也没用，裁剪发生在绘制阶段之前。真正有效的做法是切断它和裁剪容器的包含关系：
- 把DOM移到更高层：挂到body下，用React Portal、Vue Teleport，或手动appendChild + JS计算位置
- 让父容器回归position: static，并确保更外层有合适的定位上下文供子元素参考
- 把父容器的overflow改成visible（这是唯一能覆盖裁剪行为的值），由外层容器接管滚动或视觉封闭逻辑
不复杂但容易忽略：裁剪是否生效，从来不是子元素的问题，而是你有没有在对的“人”身上，同时贴上“定位标签”和“裁剪封条”。
