不能得到div与另一个div与z-index

问题描述

我想让 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>  

解决方案

您可以向两个div添加 position：relative ，并创建因此现在 .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>  

您还可以使用一些随机

  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;滤光片：亮度（0.4）; z-index：2;}。div2 {background：blue; margin-top：-15vh;滤光片：亮度（0.4）; z-index：1;}  

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

>

I want the div1 to be above div2. I try with z-index but it does not work.

I've tried this code:

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>

解决方案

You can add position: relative to both divs and create 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>

Or you could use transform-style: preserve-3d; so now .div1 should be positioned in the 3D-space and not flattened in the plane.

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>

You can also use some random transform like translate or 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 also work but they have bad 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>

这篇关于不能得到div与另一个div与z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！