为何已配置preserve-3d与translateZ的子元素仍未在父、祖父元素下层显示？

我有如下层级结构的若干div元素：

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

我的问题是：我已为parent、grandparent、uncle类元素均应用了transform-style: preserve-3d;，并为child元素应用了transform: translateZ(-2px);。我预期child会显示在parent、grandparent及所有uncle的后方，但实际child却显示在parent和grandparent的前方且与uncle元素出现层叠混乱。具体表现为uncle会遮挡child的border，同时child也会遮挡uncle的border。我原本预期只要child能显示在parent和grandparent后方，child与uncle之间的层叠问题就能解决。

我的核心需求是让child元素显示在parent与grandparent的后方。我已尝试为child也添加transform-style: preserve-3d;，但没有任何效果。我怀疑是我某些样式或设置时机存在未察觉的问题，因此附上用于创建各元素并配置样式的全部JavaScript代码（注意需要等待1秒后child元素才会显示）：

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);
  }`;
// 导航栏
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按钮
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按钮
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按钮
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();

将鼠标悬停在Uncle 1上时，child元素的位置会发生变化，这也是需要将child置于导航栏下方的原因。全屏查看效果会更直观。

内容的提问来源于stack exchange，提问作者Rojo