如何将这些 div 放在彼此之上

Question

我有 3 个 div 只包含背景颜色，我想做的是类似于 google chrome 徽标的东西。

这只是部分代码，除此之外还有更多内容，但这基本上是页面的背景。

现在，绿色在红色之上，这很好。但是黄色在红色和绿色之下，它应该在绿色之上和红色之下 div。有点像纠结divs.

有没有办法把黄色div放在绿色上面，红色div下面，让它看起来更像google chrome标志。

这是我能解释的最好的了，哈哈，我知道理解我在做什么很复杂。

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  position: absolute;
  left: 30%;
  width: 100%;
  height: 150vh;
  transform: rotate(58deg);
  background-color: #b71724;
  opacity: 1;
  transition: all 0.7s ease-in;
}

.green {
  position: absolute;
  right: 20%;
  width: 110%;
  height: 150vh;
  transform: rotate(-58deg);
  background-color: #2c4b2b;
  opacity: 1;
  transition: all 0.7s ease-in;
}

.yellow {
  position: absolute;
  top: 58%;
  width: 100%;
  height: 100vh;
  background-color: #d1aa3b;
  z-index: -1;
  opacity: 1;
  transition: all 0.7s ease-in;
}

<div class="container">
  <div class="bg-div red"></div>
  <div class="bg-div green"></div>
  <div class="bg-div yellow"></div>
</div>

Answer 1

分配差异 z-index :

.red {
 z-index : 3;
}
.yellow {
 z-index : 2;
}
.green {
 z-index : 1;
}

如果你为两个 div 放置相同的 z-index，那么它们在 HTML 代码中的位置将决定它们的位置（最后在正文前面）

Answer 2

您可以像在黄色上使用的那样在红色和绿色上使用 z-index 将黄色的 z-index 更改为 0 并将绿色的 z-index 定义为 -1 和z-index 的红色变为 1.

Answer 3

没有。这对于纸之类的东西是可能的，但是 z-index 更像是一堆盘子。这就像堆叠盘子，使底部的盘子也位于顶部盘子的顶部。不会发生的。

尝试“欺骗”解决方案的唯一方法是复制底部元素（黄色），将其一直提升到顶部，并以某种方式掩盖它，使其 看起来 就像它既在红色之下又在绿色之上。我不确定您在实际应用程序中尝试做什么，但我建议您只使用图像来实现效果。

但是没有办法让这三个 div 按照您描述的方式工作。

Answer 4

解决你的问题的一个方法是使用一个额外的div来关闭最后一个div的位置，我给你看一个示例代码：

      .contain {
        position: relative;
        padding: 20px;
      }
      div {
        width: 100px;
        height: 400px;
      }
      .red {
        position: absolute;
        background: red;
        left: 220px;
        transform: rotate(-33deg);
        z-index: 2;
      }
      .yellow {
        position: absolute;
        background: yellow;
        transform: rotate(90deg);
        top: 140px;
        left: 160px;
        z-index: 1;
      }
      .greenOut {
        height: 200px;
        z-index: 3;
        background: green;
        transform: rotate(34deg);
        position: absolute;
        left: 138px;
        top: 34px;
      }
      .green {
        position: absolute;
        background: green;
        transform: rotate(34deg);
        left: 80px;
      }

    <div class="contain">
      <div class="red"></div>
      <div class="yellow"></div>
      <div class="green"></div>
      <div class="greenOut"></div>
    </div>

如何将这些 div 放在彼此之上

How to position these divs on top of each other

html

css

position

z-index