为什么 translateZ 未应用于直接 parent 或其 parent？

Question

所以我有一些 div 具有这样的层次结构：

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

我的问题是，我将 transform-style: preserve-3d; 应用于 parent，将祖父 parent 应用于 transform: translateZ(-2px)，并将 transform: translateZ(-2px) 应用于 child。我希望 child 出现在 parent、祖父 parent 和叔叔的后面。然而，child出现在parent和grandparent和的前面，是mixing与叔叔们。基本上，大叔们在掩护child的border，child在掩护大叔们的border。我希望如果child出现在parent和grandparent之后，child和叔叔之间的问题就会得到解决。
我只想让 child 出现在 parent 和 grandparent 后面。我也尝试将 transform-style: preserve-3d; 应用于 child，但没有任何变化。我假设我的某些样式或时间存在问题，但我没有意识到，所以这里有一堆 Javascript 应用每个元素及其样式（请注意，您需要等待一秒钟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);
  }`;
//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();

如果您将鼠标悬停在 Uncle 1 上，则 child 会改变其位置，因此我需要将其放置在导航栏下方。全屏显示可能会更好看。 Codepen.

Answer 1

您需要删除正在申请的 filter，这是罪魁祸首。那个应用于 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();

为什么 translateZ 未应用于直接 parent 或其 parent？

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

html

css

z-index

css-position

css-transforms