如何仅修改.green的CSS使其显示在z-index最大值的.blue之上？

直接上可行方案，给.green添加3D变换属性即可：

修改后的.green样式：

.green {
  background: green;
  position: relative;
  z-index: 999;
  transform: translateZ(1px);
}

原理说明 #

• 你之前试的transform: scale(1)属于2D变换，它确实会创建堆叠上下文，但不会改变元素在Z轴的空间位置，所以没法突破平面堆叠的限制，干不过z-index拉满的.blue。
• 而translateZ(1px)是3D变换，它不仅会生成新的堆叠上下文，还会把元素在Z轴上往前推一层，这个层级优先级要高于仅靠z-index排序的平面元素。哪怕.blue的z-index是最大值2147483647，也挡不住它。

你也可以用transform: translate3d(0, 0, 1px)替代，效果完全一致。

内容的提问来源于stack exchange，提问作者5tormTrooper