深入理解 `z-index` 与 `overflow`

在前端开发中，z-index 和 overflow 是两个看似简单却极易引发误解的 CSS 属性。它们分别控制元素的层叠顺序 和内容溢出行为 ，但在实际应用中，它们的交互常常导致开发者陷入"为什么我的元素被裁剪了？"、"z-index 为什么不起作用？"等困境。

---

一、问题重现：为什么 z-index 无法突破 overflow: hidden 的裁剪？

我们先来看一个经典问题：

<div class="box">
  <div class="relative">
    <div class="ant-modal-content">
      ssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div>
  </div>
</div>

.box {
  width: 100px;
  height: 500px;
  background-color: red;
  overflow: hidden; /* 裁剪溢出内容 */
}

.ant-modal-content {
  position: relative;
  z-index: 99; /* 期望它"跳出"父容器 */
}

预期 ：.ant-modal-content 应该完全显示，因为它有高 z-index。

实际 ：文本被 .box 的右侧边界裁剪。

❌ 常见误解

"z-index 高，就应该显示在最上面，不应该被裁剪。"

这是错误的。z-index 控制的是层叠顺序（谁在上） ，而 overflow: hidden 控制的是裁剪行为（是否可见）。两者属于不同的渲染阶段。

---

二、核心概念解析

1. overflow 的作用范围

overflow 属性定义了当内容溢出其容器时的处理方式：

• visible：默认值，内容溢出也不裁剪。
• hidden：溢出内容被裁剪且不可见。
• scroll：始终显示滚动条。
• auto：根据内容是否溢出决定是否显示滚动条。

关键点：

• overflow: hidden 会在其元素的边界内创建一个裁剪区域（clipping region）。
• 任何后代元素，无论其 position 或 z-index 如何，只要其渲染区域超出该边界，都会被裁剪。
• 这个裁剪行为发生在层叠之前。

2. z-index 的作用机制

z-index 决定了定位元素（position: relative/absolute/fixed/sticky）在 Z 轴上的堆叠顺序。

重要前提：

• z-index 只在同一个层叠上下文（stacking context） 中有效。
• z-index 无法突破父级的裁剪边界。

什么是层叠上下文？

层叠上下文是一个三维的渲染环境，元素在其中按照特定顺序堆叠。浏览器会为以下情况创建新的层叠上下文：

• 根元素（<html>）
• position: fixed 或 sticky
• z-index 不为 auto 的定位元素
• opacity < 1
• transform 不为 none
• filter 不为 none
• will-change 指定了触发层叠上下文的属性

---

三、为什么 position: absolute 有时能"逃出"裁剪？

在某些情况下，开发者发现使用 position: absolute 可以让元素"跳出" overflow: hidden 的裁剪。这其实是误解。

✅ 正确理解：

• position: absolute 本身不会 突破 overflow: hidden 的裁剪。
• 但是，如果绝对定位的元素被移动到父容器的可视区域之外，并且其包含块（containing block）没有 overflow: hidden，那么它可能看起来"逃出"了裁剪。

🌰 举例：

.parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative; /* 创建包含块 */
}

.child {
  position: absolute;
  left: 120px; /* 移动到父元素右侧外部 */
}

此时 .child 仍然被裁剪，因为它的渲染区域超出了 .parent 的边界。

但如果 .child 的包含块是另一个没有 overflow: hidden 的元素，它就可以自由显示。

---

四、解决方案：如何让内容"跳出"裁剪？

要让 .ant-modal-content 完全显示，必须让它脱离 .box 的裁剪范围。以下是几种有效方法：

✅ 方法 1：使用 position: fixed（推荐）

fixed 定位的元素相对于视口定位，完全脱离文档流，不受任何父级 overflow 影响。

.ant-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: white;
  padding: 20px;
}

配合建议 ：将 Modal 的 DOM 结构移到 <body> 下（如使用 React Portal），避免结构混乱。

---

✅ 方法 2：调整 DOM 结构（提升层级）

将 .ant-modal-content 移到 .box 外部，使其不再受其 overflow 影响。

<div class="box">...</div>
<div class="ant-modal-content">Modal Content</div>

---

✅ 方法 3：移除或修改 overflow: hidden

如果 .box 不需要裁剪功能，直接修改：

.box {
  overflow: visible; /* 或者移除该属性 */
}

---

✅ 方法 4：使用 position: absolute + 外部包含块

确保 .ant-modal-content 的包含块是 .box 外部的一个元素。

<div class="container">
  <div class="box">...</div>
  <div class="modal-container">
    <div class="ant-modal-content">Content</div>
  </div>
</div>

.modal-container {
  position: relative;
}

.ant-modal-content {
  position: absolute;
  left: 0;
  top: 0;
}

---

五、Ant Design Modal 的真实实现原理

Ant Design 等 UI 框架的 Modal 组件之所以不会被父级裁剪，是因为它们：

1. 使用 position: fixed 定位。
2. 通过 ReactDOM.createPortal 将 Modal 渲染到 document.body 下。
3. 设置高 z-index（如 1000）确保层级最高。

<Modal visible={true}>Content</Modal>

生成的 DOM 类似于：

<body>
  <div class="your-app">...</div>
  <div class="ant-modal-root">
    <div class="ant-modal" style="position: fixed;">Modal</div>
  </div>
</body>

---

六、总结与最佳实践

属性	作用	限制
z-index	控制层叠顺序	不能突破 overflow: hidden 的裁剪
overflow: hidden	创建裁剪区域	裁剪所有溢出的后代内容

✅ 最佳实践

1. 浮层组件（Modal、Tooltip、Dropdown）应使用 position: fixed。
2. 使用 Portal 将浮层 DOM 提升到 body 下，避免样式污染。
3. 避免在可能包含浮层的父容器上使用 overflow: hidden。
4. 理解层叠上下文的创建规则 ，合理使用 z-index。
5. position: absolute 不是"逃脱"裁剪的银弹 ，它仍然受包含块的 overflow 限制。

---

💡 一句话总结

z-index 决定"谁在上"，overflow 决定"谁可见"。一个元素即使 z-index 再高，如果被 overflow: hidden 裁剪，也依然不可见。