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

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

<强>演示

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 2

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

将position:relative添加到.up类

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 3

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

在处理两个元素时，可以使用值0,1或-1。不要让自己的价值更高。

为什么“z-index”不适用于具有变换的元素：translateY（）

3 个答案: