使用 z-index 使 div 高于另一个 div答案

【问题标题】：Using z-index to get div above another div使用 z-index 使 div 高于另一个 div
【发布时间】：2016-03-03 12:50:33
【问题描述】：

我希望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>

【问题讨论】：

标签： html css z-index

【解决方案1】：

您可以将position: relative 添加到两个div 并创建stacking context

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>

Filters 也可以工作，但他们有不好的Support

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>

【讨论】：

【解决方案2】：

在许多情况下，必须定位一个元素，z-index 才能工作。

确实，将position: relative 应用于问题中的div 将解决z-index 问题。

实际上，position: fixed、position: absolute 和position: sticky 也会启用z-index，但这些值也会改变布局。使用position: relative，布局不会受到干扰。

基本上，只要元素不是position: static（默认值），它就会被视为已定位，z-index 将起作用。

这里和相关问题中的一些答案断言z-index仅对定位元素有效。从 CSS3 开始，这不再适用。

flex items 或grid items 的元素可以使用z-index，即使position 是static。

来自规格：

4.3. Flex Item Z-Ordering

Flex 项目的绘制与内联块完全相同，除了使用 order-modified 文档 order 代替 raw 文档顺序和z-index 以外的auto 值创建一个堆叠上下文，即使position 是static。

5.4. Z-axis Ordering: the z-index property

grid item的绘制顺序和inline blocks完全一样，只是order-modified document order是用于代替原始文档顺序，并且 z-index 以外的 auto 值创建一个堆叠上下文，即使 position 是 static。

这是 z-index 处理非定位弹性项目的演示：https://jsfiddle.net/m0wddwxs/

【讨论】：

【解决方案3】：

z-index 仅适用于具有position 而非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>

【讨论】：

【解决方案4】：

div 的默认属性是position:static，在两个div 中添加position:relative 然后只有z-index 可以工作。

【讨论】：