为什么"z-index"不适用于具有变换的元素:translateY()

Question

以下是片段:

.up {
  background-color: red;
  height: 100px;
  z-index: 100;
}
.down {
  background-color: yellow;
  height: 100px;
  width: 50%;
  margin: 0 auto;
  z-index: 1;
  transform: translateY(-50%);
}

<div class="up"></div>
<div class="down"></div>

如可以看到的,该.up元件具有较高的z-index比.down元件.但是,.down元素仍然.up以某种方式位于元素的前面.

有没有人有这个想法？如何解决这个问题？

Answer 1

1. 对于z-index工作position必须应用为absolute,relative或fixed.添加position: relative;到.down元素
2. 由于没有父子层次结构,因此z-index应该应用否定以使元素落后.

演示

.up {
  background-color: red;
  opacity: .5; /* For DEMO Purpose */
  height: 100px;
  /* z-index: 100; /* Not required. Not work #1 */
}
.down {
  background-color: yellow;
  height: 100px;
  width: 50%;
  margin: 0 auto;
  z-index: -1; /* Update this */
  transform: translateY(-50%);
  position: relative; /* Add this */
}

<div class="up"></div>
<div class="down"></div>