为什么“z-index”不适用于具有变换的元素：translateY()答案

【问题标题】：Why "z-index" does not work for element having transform: translateY()为什么“z-index”不适用于具有变换的元素：translateY()
【发布时间】：2015-12-25 07:50:33
【问题描述】：

下面是sn-p：

.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 元素的前面..

有人对此有想法吗？如何解决这个问题？

【问题讨论】：

标签： html css transform

【解决方案1】：

要使z-index 工作position 必须应用为absolute、relative 或fixed。将position: relative; 添加到.down 元素
由于没有父子层次结构，因此应应用否定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>

【讨论】：

【解决方案2】：

Note: z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

将position:relative 添加到.up 类

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

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

【讨论】：

这是有效的，因为您已将 position 添加到 .up 元素以及 jsfiddle.net/tusharj/1md7zggo/3
是的，这也有效，但完全取决于 OP 他是否可以将position 申请到.up 或.down
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) 所以现在您可以删除.down 的z-index
呵呵是的，非常感谢您帮助我改进答案

【解决方案3】：

请记住，具有非静态定位的元素将始终出现在具有默认静态定位的元素之上。

当您处理两个元素时，您可以使用值 0、1 或 -1。不要用更高的价值观让自己复杂化。

【讨论】：