【发布时间】：2021-05-06 20:17:18
【问题描述】：
所以我有几个divs，其层次结构如下：
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="uncle"></div><div class="uncle"></div>
</div>
我的问题是，我将transform-style: preserve-3d; 应用于父母、祖父母和叔叔，并将transform: translateZ(-2px) 应用于孩子。我希望孩子出现在父母、祖父母和叔叔后面。然而，孩子出现在父母和祖父母面前并且正在与叔叔混合。基本上，叔叔覆盖了孩子的border，孩子覆盖了叔叔的border。如果孩子出现在父母和祖父母的后面，我希望孩子和叔叔之间的问题会得到解决。
我想要的只是让孩子出现在父母和祖父母的后面。我也尝试将transform-style: preserve-3d; 应用于孩子，但没有任何变化。我假设我的一些样式或时间存在我没有意识到的问题，所以这里有一堆 Javascript 应用每个元素及其样式（请注意，您需要等待一秒钟才能让子元素出现）：
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();如果您将鼠标悬停在叔叔 1 上，那么孩子会改变其位置，因此我需要将其放在导航栏下方。在全屏下可能会更好看一些。 Codepen.
【问题讨论】：
-
这是造成问题的过滤器，您需要删除，否则将不可能
-
@TemaniAfif 所以在元素的亮度为 100 之后，我应该将其设置为 null 吗？
-
yes filter:none 将修复它
标签： html css css-position z-index css-transforms