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，先验证是否被裁剪：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 临时删掉父级的 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"></teleport>，本质是把 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 树，而不是在内部堆样式

真正卡住你的，往往不是 z-index 写得不够大，而是你忘了 overflow 是个“物理屏障”，它不讲层级，只讲边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！