overflow: hidden会直接裁剪超出父容器的子元素，z-index根本无法生效；需将外溢元素移出裁剪容器（如挂载到body），或改用overflow: clip、Portal/Teleport等方案。
overflow: hidden 会裁剪子元素，z-index根本没机会生效
不是 z-index 失效了，是它根本没被绘制出来——overflow: hidden 会在渲染层直接把超出父容器边界的子元素切掉，无论你设 z-index: 9999 还是 position: fixed，只要内容越界，浏览器就“看不见它”。
-
overflow: hidden的裁剪发生在层叠上下文内部，且优先级高于 z-index 排序 - 常见于 modal、tooltip、dropdown 等需要“破框”显示的组件，父容器却意外加了
overflow: hidden - 即使子元素已定位、z-index 正常（Computed 面板里显示为黑色数值），只要被裁剪，视觉上就是“消失”或“被遮挡”
- 用 Chrome DevTools 的 «Rendering» 面板勾选 «Show layer borders»，能直观看到哪些区域被裁剪了
怎么确认是 overflow 导致的遮挡？
别只盯着 z-index，先验证是否被裁剪：
- 临时删掉父级的
overflow: hidden或改成overflow: visible，看元素是否立刻显示完整 - 在 Elements 面板中选中父容器 → 右侧 «Computed» 搜
overflow，确认值确实是hidden或auto - 检查父容器是否有
border-radius+overflow: hidden组合——圆角本身不裁剪，但加上 overflow 后会强制裁剪子元素的圆角边缘 - 注意：Flex/Grid 容器默认不触发裁剪，但如果显式设了
overflow，一样生效
修复时别硬改 z-index，优先处理裁剪逻辑
z-index 解决不了裁剪问题，得让元素“逃出”裁剪边界：
- 如果父容器必须保留
overflow: hidden（比如做卡片截断），就把需要外溢的元素（如 tooltip）用position: fixed挂到body下，再用 JS 计算位置 - React 中用
createPortal、Vue 中用<Teleport to="body">，本质是把 DOM 节点移出裁剪容器 - 避免给父容器加
transform或will-change后又设overflow: hidden——这会额外创建层叠上下文，让裁剪和层级问题叠加 - 若只是想隐藏滚动条但保留溢出可见，用
overflow: clip（现代浏览器支持）替代hidden，它不触发裁剪行为
容易被忽略的连锁反应：overflow + transform = 双重隔离
当父容器同时满足 overflow: hidden 和 transform: translateZ(0)（或任何非 none transform），它不仅裁剪内容，还创建新层叠上下文——子元素既被切掉，又被锁死在局部层级里，调试时会看到两个问题同时存在。
立即学习“前端免费学习笔记（深入）”；
- DevTools 的 «Layers» 面板里会出现多个嵌套的「Stacking context」节点，且对应区域有裁剪线框
- 此时只删
overflow不够，还得处理transform；只调z-index完全无效 - 最稳妥解法：把外溢元素完全移出该父容器 DOM 树，而不是在内部堆样式
