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

Question

我有 3 个只包含背景颜色的 div，我想做的是类似于谷歌浏览器徽标的东西。

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

现在，绿色在红色之上，这很好。但是黄色在红色和绿色的下方，它应该在绿色的顶部和红色 div 的下方。有点像纠缠在一起的 divs。

有没有办法将黄色 div 放在绿色之上和红色 div 之下 使其看起来更像谷歌浏览器徽标。

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

这是代码（点击代码笔）

.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 更像是一堆盘子。这就像堆叠盘子，使底部的盘子也位于顶部盘子的顶部。不会发生的。

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

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

Answer 2

分配不同的 z-index :

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

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

Answer 3

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

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>

Answer 5

是的，绝对有办法用纯 CSS 做到这一点。

将 div 放入具有高

perspective

值的容器中（以最大化透视）并相应地在其 y 轴上旋转内部 div；这是一个快速演示：

* {
  box-sizing:border-box;
  outline:none
}
.group {
  position:relative;
  perspective: 10000px;
  transform-style: preserve-3d;
  perspective-origin: center center;  
}
.group > div {
  width:400px;
  height:90px;
  position:relative;
}
.red {
  background:red;
  transform: rotateZ(65deg) rotateY(-5deg) translateY(-160px) translateX(50px);
  transform-origin: 0;
}
.blue {
  background:blue;
  transform: rotateZ(-65deg) rotateY(-39deg)  translateY(160px) translateX(-250px) scaleX(1.25);
  transform-origin: 0;
}
.lime {
  background:lime;
  transform: rotateY(5deg) translateY(60px);
  transform-origin: 0;
}

<div class="group">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="lime"></div>
</div>