父元素写了三维变换之后，子元素的层级不再与页面其余部分比较，浮层被同级元素压住。根因是父级创建了新的堆叠上下文。
发生了什么
变换取值不是 none、三维变换、透明度小于一、滤镜、will-change 等都会创建堆叠上下文。上下文一旦形成，内部子元素的层级被压缩成一个整体，对外只按父级自身的层级参与比较。
三种处理方向
| 方向 | 做法 | 代价 |
|---|---|---|
| 提升父级 | 给父级设置更高层级 | 整块内容一起上移 |
| 移出元素 | 把置顶元素挂到顶层容器 | 需同步定位坐标 |
| 移除触发属性 | 动画结束后清掉变换 | 失去合成层优化 |
纯样式的最小改动
.panel { position: relative; z-index: 20; transform: translateZ(0); }
.tooltip { position: absolute; z-index: 30; }提升父级层级后，内部元素即可压住同级元素。若遮挡发生在同一父级内部，直接调整子元素数值即可。
判断依据
- 在计算样式面板查看父级是否存在会创建上下文的属性。
- 比较双方的最近共同上下文祖先，层级只在同一上下文内生效。
- 浮层类元素优先放顶层容器，避免受任何祖先上下文影响。