使用z-index将div取得另一个div [英] Using z-index to get div above another div

问题描述

我希望 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 并创建 堆叠上下文

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>

b
$ b

或者您可以使用 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
$ b

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>

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