How to position these divs on top of each other

Question

I have 3 divs that only contain a background color and what I want to make is something similar to the google chrome logo.

This is just part of the code, there is more content that comes on top of all this, but this is basically the background for the page.

Right now, green is on top of red which is fine. But yellow is below both red and green and it should be on TOP of green and UNDER red div. Sort of like entangled divs.

Is there a way to put the yellow div on top of green and under red div to make it look more like google chrome logo.

This is the best i can explain lol i know its complex to understand what im doing.

Here's the code (click for codepen)

.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

No. This is possible with something like paper, but z-index is more like a stack of plates. It would be like stacking plates so that the bottom one is also on top of the top one. Not going to happen.

The only way you could try to "cheat" a solution is to copy the bottom element (yellow), raise it all the way to the top, and somehow mask it so that it looks like it's both under red and above green. I'm not sure what you're trying to do in your actual application, but I would recommend just achieving the effect with an image.

But there is no way to make just these three divs work in the way you describe.

Answer 2

Assign differents z-index :

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

If you put the same z-index for two divs, then their place into the HTML code will determine their position (last in the body in front)

Answer 3

You can use the z-index on the red and green as you used on yellow changing the z-index of yellow to 0 and defining the z-index of green to -1 and the z-index of red to 1.

Answer 4

One solution to your problem is to use an extra div to close the position of the last div, I show you an example code:

      .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>