How do I force an elements to appear behind the parent and its parent?

Question

Let's say I have three divs in a hierarchy:

<div> grand parent
  <div> parent
    <div> child
    </div>
  </div>
</div>

I want child to appear behind grand parent. I've seen this answer on SO, which was good until I used transform: translate. Now, the child appears behind the parent, but not the grand parent. How can I force the child div to appear behind the grandparent while the grandparent keeps transform?

var db = false;
function remove() {
  document.getElementsByClassName("content-wrapper")[0].style.transform = !db ? "none" : "translate(-50%, 0%)";
  document.getElementById("trans").innerHTML = !db ? "Without transform" : "With transform";
  db = !db;
}

.popup {
  background: red;
  height: 200px;
  width: 200px;
}

.close {
  position: absolute;
  height: 200px;
  width: 200px;
  background: yellow;
  top: 25px;
  left: 25px;
  z-index: -1;
}

.content-wrapper {
  transform: translate(-50%, 0%);
  position: absolute;
  left: 50%;
  background: blue;
  width: 500px;
  height: 90px;
  display: flex;
}

<button onclick="remove()">toggle transform</button>
<p>Note the yellow (child) div<p/>
<p id="trans">With transform</p>
<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>