html css css-position z-index css-transforms

Why is translateZ not being applied to the direct parent or its parent?

So I have a few divs with a hierarchy like this:

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="uncle"></div><div class="uncle"></div>
</div>

My problem is, I have transform-style: preserve-3d; applied to the parent, grandparent, and uncles and transform: translateZ(-2px) applied to the child. I expect the child to appear behind both the parent, grandparent, and uncles. However, the child appears in front of both the parent and grandparent and is mixing with the uncles. Basically, the uncles are covering the border of the child and the child is covering the border of the uncles. I expect that the problem between the child and uncle will be resolved if the child appears behind the parent and grandparent.
All I want is for the child to appear behind the parent and grandparent. I have tried to apply transform-style: preserve-3d; to the child as well, but there was no change. I'm assuming there is a problem with some of my styles or timing that I don't realize, so here's a bunch of Javascript which applies each element and their styles (note that you need to wait for a second for the child element to appear):

elements = {};
document.getElementsByTagName("style")[0].innerHTML += `
  .navButton {
    color: white; 
    transition: filter 1.5, background-color 0.3s; 
    background-color: inherit; 
    border: 0px; 
    outline: none; 
    font-family: Cinzel;
    filter: brightness(0%);
    transform-style: preserve-3d;
  }
  .navButton:hover {
    font-size: 35px;
    background-color: rgb(110, 205, 255);
  }
  #child {
    position: absolute;
    top: 0px;
    height: 50px;
    transition: top 0.3s, height 0.3s;
    transform-style: preserve-3d;
    transform: translateZ(-2px);
  }`;
//Navigation bar
elements.navBar = document.createElement("div");
elements.navBar.style.cssText = "position: absolute; left: 50%; transform: translate(-50%, 0%); display: flex; top: 15px; width: 800px; height: 60px; background-color: rgb(92, 199, 238); filter: brightness(0%); box-shadow: 0px 5px 5px -1px gray; font-family: Cinzel; font-size: 30px; color: white; transform-style: preserve-3d;";
document.body.append(elements.navBar);
// Parent in nav
elements.parent = document.createElement("button");
elements.parent.type = "button";
elements.parent.innerHTML = "Parent";
elements.parent.classList.add("navButton");
elements.parent.style.fontSize = "30px";
elements.parent.style.borderRight = "3px solid rgb(85, 190, 220)";
elements.parent.style.maxWidth = "250px";
elements.parent.style.minWidth = "150px";
elements.navBar.append(elements.parent);
// Uncle One in nav
elements.uncleOne = document.createElement("button");
elements.uncleOne.type = "button";
elements.uncleOne.innerHTML = "Uncle 1";
elements.uncleOne.classList.add("navButton");
elements.uncleOne.style.cssText = "font-size: 30px; border-right: 3px solid rgb(85, 190, 220);";
elements.navBar.append(elements.uncleOne);
elements.uncleOne.style.width = elements.uncleOne.offsetWidth * 1.3;
// Uncle Two in nav 
elements.uncleTwo = document.createElement("button");
elements.uncleTwo.type = "button";
elements.uncleTwo.innerHTML = "Uncle Two";
elements.uncleTwo.classList.add("navButton");
elements.uncleTwo.style.fontSize = "30px";
elements.uncleTwo.style.borderRight = "3px solid rgb(85, 190, 220)";
elements.navBar.append(elements.uncleTwo);
elements.uncleTwo.style.width = elements.uncleTwo.offsetWidth * 1.3;

function lighten() {
  elements.navBar.style.filter = "brightness(100%)";
  elements.parent.style.filter = "brightness(100%)";
  elements.uncleOne.style.filter = "brightness(100%)";
  elements.uncleTwo.style.filter = "brightness(100%)";
  elements.child = document.createElement("div");
  elements.child.id = "child";
  elements.child.innerHTML = "Child";
  setTimeout(() => {
    elements.child.style.cssText = "left: -3px; width: 200px; border: 3px solid rgb(85, 190, 220); background-color: rgb(92, 199, 238);";
    elements.parent.append(elements.child);
    elements.uncleOne.onmouseenter = () => {
      setTimeout(() => {
        elements.child.style.top = "60px";
        elements.child.style.height = "80px";
      }, 1);
    }
    elements.uncleOne.onmouseleave = () => {
      elements.child.style.top = "0px";
      elements.child.style.height = "50px";
    }
  }, 1600);
}
lighten();

If you hover over Uncle 1, then the child with change its position, hence my need to place it underneath the navBar. It would probably look bit better in fullscreen. Codepen.

Solution

You need to remove the filter you are applying, it's the culprit. The one applied to navBar

elements = {};
document.getElementsByTagName("style")[0].innerHTML += `
  .navButton {
    color: white; 
    transition: filter 1.5, background-color 0.3s; 
    background-color: inherit; 
    border: 0px; 
    outline: none; 
    font-family: Cinzel;
    filter: brightness(0%);
    transform-style: preserve-3d;
  }
  .navButton:hover {
    font-size: 35px;
    background-color: rgb(110, 205, 255);
  }
  #child {
    position: absolute;
    top: 0px;
    height: 50px;
    transition: top 0.3s, height 0.3s;
    transform-style: preserve-3d;
    transform: translateZ(-2px);
  }`;
//Navigation bar
elements.navBar = document.createElement("div");
elements.navBar.style.cssText = "position: absolute; left: 50%; transform: translate(-50%, 0%); display: flex; top: 15px; width: 800px; height: 60px; background-color: rgb(92, 199, 238);  box-shadow: 0px 5px 5px -1px gray; font-family: Cinzel; font-size: 30px; color: white; transform-style: preserve-3d;";
document.body.append(elements.navBar);
// Parent in nav
elements.parent = document.createElement("button");
elements.parent.type = "button";
elements.parent.innerHTML = "Parent";
elements.parent.classList.add("navButton");
elements.parent.style.fontSize = "30px";
elements.parent.style.borderRight = "3px solid rgb(85, 190, 220)";
elements.parent.style.maxWidth = "250px";
elements.parent.style.minWidth = "150px";
elements.navBar.append(elements.parent);
// Uncle One in nav
elements.uncleOne = document.createElement("button");
elements.uncleOne.type = "button";
elements.uncleOne.innerHTML = "Uncle 1";
elements.uncleOne.classList.add("navButton");
elements.uncleOne.style.cssText = "font-size: 30px; border-right: 3px solid rgb(85, 190, 220);";
elements.navBar.append(elements.uncleOne);
elements.uncleOne.style.width = elements.uncleOne.offsetWidth * 1.3;
// Uncle Two in nav 
elements.uncleTwo = document.createElement("button");
elements.uncleTwo.type = "button";
elements.uncleTwo.innerHTML = "Uncle Two";
elements.uncleTwo.classList.add("navButton");
elements.uncleTwo.style.fontSize = "30px";
elements.uncleTwo.style.borderRight = "3px solid rgb(85, 190, 220)";
elements.navBar.append(elements.uncleTwo);
elements.uncleTwo.style.width = elements.uncleTwo.offsetWidth * 1.3;

function lighten() {
  elements.parent.style.filter = "brightness(100%)";
  elements.uncleOne.style.filter = "brightness(100%)";
  elements.uncleTwo.style.filter = "brightness(100%)";
  elements.child = document.createElement("div");
  elements.child.id = "child";
  elements.child.innerHTML = "Child";
  setTimeout(() => {
    elements.child.style.cssText = "left: -3px; width: 200px; border: 3px solid rgb(85, 190, 220); background-color: rgb(92, 199, 238);";
    elements.parent.append(elements.child);
    elements.uncleOne.onmouseenter = () => {
      setTimeout(() => {
        elements.child.style.top = "60px";
        elements.child.style.height = "80px";
      }, 1);
    }
    elements.uncleOne.onmouseleave = () => {
      elements.child.style.top = "0px";
      elements.child.style.height = "50px";
    }
  }, 1600);
}
lighten();