如何击败具有最高 z-index 值的兄弟堆栈上下文

Question

鉴于以下情况，如何仅通过修改

.green

的CSS来确保

.blue

出现在

.green

之上？

.blue

具有

2147483647

的最高 z-index 值，并且无法更改。

我的理解是这两个元素已经有自己的堆叠上下文，所以像

transform: scale(1)

这样的诡计在这里不起作用。

有办法吗？

div {
  width: 200px;
  height: 100px;
}

.green {
  background: green;
  position: relative;
  z-index: 999;
}

.blue {
  background: blue;
  position: absolute;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 2147483647; // maximum value
}

<div class="green">Must appear above</div>
<div class="blue">Cannot modify</div>

Answer 1

3D transform 可以做到但要注意transform的潜在副作用：

div {
  width: 200px;
  height: 100px;
}

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

.blue {
  background: blue;
  position: absolute;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 2147483647; /* maximum value */
}

body {
  transform-style:preserve-3d; /* this is mandatory*/
}

<div class="green">Must appear above</div>
<div class="blue">Cannot modify</div>

相关：为什么有 z-index 值的元素不能覆盖它的子元素？