使用z-index将一个div置于另一个div之上

Question

我希望div1在div2之上。我尝试使用z-index，但它没有起作用。

我试过这段代码：

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

.div1 {
  background: red;
  z-index: 1;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 2
}

<div class="div1"></div>
<div class="div2"></div>

- Corentin Branquet

Answer 1

您可以在两个

标签中添加position: relative属性，并创建层叠上下文

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

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}

<div class="div1"></div>
<div class="div2"></div>

您也可以使用transform-style: preserve-3d;，因此现在.div1应该被定位在3D空间中，而不是在平面上压扁。

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

.div1 {
  background: red;
  z-index: 2;
  transform-style: preserve-3d;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

您还可以使用一些随机的transform，例如translate或rotate

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

.div1 {
  background: red;
  z-index: 2;
  transform: translate(1px);
}

.div2 {
  background: blue;
  transform: translate(1px, -15vh);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

滤镜也可以使用，但是它们的支持度不够好。

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

.div1 {
  background: red;
  filter: brightness(0.4);
  z-index: 2;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  filter: brightness(0.4);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

- Nenad Vracar

Answer 2

在许多情况下，必须为元素定位才能使 z-index 生效。实际上，在问题中将 div 应用 position: relative 将解决 z-index 问题。事实上，position: fixed、position: absolute 和 position: sticky 也可以启用 z-index，但这些值也会改变布局。使用 position: relative 不会影响布局。基本上，只要元素不是 position: static（默认值），它就被认为是定位的，z-index 就会生效。

---

一些答案在此处和相关问题中断言 z-index 仅适用于定位元素。从 CSS3 开始，这不再正确。即使 position 是 static，作为 flex 项 或 grid 项 的元素也可以使用 z-index。

从规范中可以看出：

4.3. Flex 项的 Z-Order

Flex 项的绘制方式与内联块完全相同，只是使用修改顺序的文档顺序代替原始文档顺序，并且除了 position 是 static 之外，z-index 值（不是 auto）即使创建堆栈上下文。

5.4. Z 轴顺序：z-index 属性

网格项的绘制顺序与内联块完全相同，只是使用修改顺序的文档顺序代替原始文档顺序，并且除了 position 是 static 之外，z-index 值（不是 auto）即使创建堆栈上下文。

这里展示了非定位 flex 项上工作的 z-index 的演示：https://jsfiddle.net/m0wddwxs/

- Michael Benjamin

Answer 3

z-index 属性仅适用于带有非 static 定位的元素，例如：relative、absolute 或 fixed。

div {
  width:100px;
  height: 100px;
  position:relative;
}
.div1 {
  background: red;
  z-index: 2;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1
}

<div class="div1"></div>
<div class="div2"></div>

- Дмитрий Горицан

Answer 4

div 的默认属性是 position:static，在两个 div 中加入 position:relative，然后才能使用 z-index。

- Nukul Ghosh