### [父级有 3D 变换时如何控制堆叠顺序](https://www.huociguo.com/article/1643)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 父元素写了三维变换之后，子元素的层级不再与页面其余部分比较，浮层被同级元素压住。根因是父级创建了新的堆叠上下文…

父元素写了三维变换之后，子元素的层级不再与页面其余部分比较，浮层被同级元素压住。根因是父级创建了新的堆叠上下文。

![显示器上运行的应用程序画面](https://api.huociguo.com/wp-content/uploads/2026/10/e13.jpg)

堆叠上下文决定了层级比较的范围

## 发生了什么

变换取值不是 none、三维变换、透明度小于一、滤镜、will-change 等都会创建堆叠上下文。上下文一旦形成，内部子元素的层级被压缩成一个整体，对外只按父级自身的层级参与比较。

## 三种处理方向

| 方向  | 做法  | 代价  |
| --- | --- | --- |
| 提升父级 | 给父级设置更高层级 | 整块内容一起上移 |
| 移出元素 | 把置顶元素挂到顶层容器 | 需同步定位坐标 |
| 移除触发属性 | 动画结束后清掉变换 | 失去合成层优化 |

## 纯样式的最小改动

```
.panel { position: relative; z-index: 20; transform: translateZ(0); }
.tooltip { position: absolute; z-index: 30; }
```

提升父级层级后，内部元素即可压住同级元素。若遮挡发生在同一父级内部，直接调整子元素数值即可。

## 判断依据

-   在计算样式面板查看父级是否存在会创建上下文的属性。
-   比较双方的最近共同上下文祖先，层级只在同一上下文内生效。
-   浮层类元素优先放顶层容器，避免受任何祖先上下文影响。

**Tags:** 3D变换, translateZ, z-index层级, 堆叠上下文, 堆叠顺序

**Categories:** HTML5

---