<div class="container">
  <div class="pink"></div>
  <div class="green">
    <div class="black">
      <div class="orange"></div>
    </div>
  </div>
</div>
.container {
  width: 600px;
  height: 600px;
  position: relative;
  padding: 60px;
}

.pink {
  width: 400px;
  height: 400px;
  background-color: pink;
}

.green {
  width: 300px;
  height: 300px;
  background-color: palegreen;
  position: absolute;
  top: 200px;
  left: 200px;
  padding: 20px;
  /* toggle the line below to apply a stacking context to the green square and see what happens when mix-blend-mode is applied to the black square */
/*   isolation: isolate; */
}

.black {
  width: 200px;
  height: 200px;
  position: absolute;
  left:-40px;
  top: -40px;
  background-color: black;   
/*   mix-blend-mode: overlay; */
}

.orange {
  width: 200px;
  height: 200px;
  position: absolute;
  left:-50px;
  top: -50px;
  background-color: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.