Chrome与Safari中z-index和translate3D表现差异及用法咨询

先看你提供的最简示例代码：

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

哪种是预期行为？ #

根据CSS规范，当元素应用transform（值不为none）时，会自动创建一个新的层叠上下文，其层级表现等同于设置了position: relative且z-index: auto的元素。

在你的代码结构里：

• 红色div是position: relative且z-index: 1，属于父级的层叠上下文，z-index: 1的优先级高于默认的auto。
• 蓝色div是position: absolute加transform，虽创建了独立的层叠上下文，但它的z-index默认为auto，在父级上下文的层级排序中低于z-index: 1的元素。

因此红色div显示在蓝色div之上才是符合CSS规范的预期行为，Chrome的表现是正确的；Safari的差异属于旧版本浏览器对层叠上下文计算的实现偏差。

同时使用z-index和transform的正确方式是什么？ #

要避免这类兼容性问题，核心是明确控制层叠上下文的层级：

• 给带transform的元素显式设置z-index值，确保它和其他定位元素的层级关系符合预期。比如想让蓝色div在上面，给它加z-index: 2；想红色在上，保持红色的z-index: 1，给蓝色加z-index: 0即可。
• 若多个元素需要统一的层级参照，可以给它们的父容器创建层叠上下文（比如设置position: relative），这样所有子元素的z-index都会基于父容器计算，避免跨上下文的层级混乱。

示例修正代码（让红色始终在上）：

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px); z-index: 0"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

内容的提问来源于stack exchange，提问作者Xingce Bao