<div class="front">
  <div class="box yellow">1</div>
</div>
<div class="back">
  <div class="box red">2</div>
  <div class="box green">3</div>
</div>

<button>Add <code>z-index:2</code> to the flex items</button>
body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  padding-top: 50px;
}

.front {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 59, 62, .9);
}

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.front .box {
  margin: 20px auto;
}

.back {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.back .box:first-of-type {
  margin-right: 10px;
}

button {
  display: block;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 5px;
  margin: 50px auto;
  max-width: 150px;
  font-size: 1.1rem;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}
var box = document.querySelectorAll(".back .box");
var button = document.querySelector("button");

button.addEventListener("click", function(e) {
  for (var i = 0; i < box.length; i++) {
    box[i].style.zIndex = "2";
  }
});
Rerun