使用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>

Answer 1

您可以添加position: relative到div和createstacking 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>

Answer 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开始,这已不再适用.

作为弹性项目或网格项目的元素z-index即使在何时position也可以使用static.

从规格:

4.3.Flex项目Z-Ordering

柔性物品油漆完全一样内嵌块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index其它值比auto创建一个堆叠内容即使position是static.

5.4.Z轴订购:z-index属性

的网格项目的绘制顺序是完全一样的内联块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使 position是static.

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