Html 是什么导致CSS分层在这里发生变化？

此处：

正如标题所说。为什么仅仅更改“filter”属性就可以改变这里的分层呢？我该如何撤销它？我正在运行最新版本的Chrome作为张贴此

HTML:

JavaScript:

const div1 = document.querySelectorAll("#container div")[0];
const div2 = document.querySelectorAll("#container div")[1];

let on = false;

document.querySelector("#toggle").addEventListener("click", function() {
    const value = on ? "brightness(1)" : "brightness(2)";
    div1.style.filter = div2.style.filter = value;

    on ^= true;
});

---

问题的代码必须在问题中，而不仅仅是链接。将代码从jsfiddle.net复制到您的问题中，通过选择代码并使用代码工具栏按钮（

{}

）或按Ctrl+K将其标记为代码。有关更多编辑帮助，请单击[？]工具栏图标。感谢您指出这一点，已编辑。我不认为该问题是完全重复的，但我知道相关问题提供了一个解释。顺便说一句，我提供了一种解决方法：堆栈上下文的行为类似于溢出：隐藏，因此解决方案可以是将过滤器应用于paret元素

#container

，而不是

#container div

。这不是一个重复的问题。我想有时候，标记为重复的人不知道解决方案。我在stack上看到过很多这样的东西……很遗憾。@DavidsKanal自从投票关闭后，我就把它固定在你的JSFIDLE上了。

#container {
    font-size: 0;
    font-family: sans-serif;
}
#container div {
    background: crimson;
    width: 100px;
    height: 50px;
    display: inline-block;
    position: relative;
    font-size: 24px;
}
p {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 50px;
    width: 200%;
    text-align: center;
    z-index: 2;
}
button {
    margin-top: 10px;
    display: block;
}

const div1 = document.querySelectorAll("#container div")[0];
const div2 = document.querySelectorAll("#container div")[1];

let on = false;

document.querySelector("#toggle").addEventListener("click", function() {
    const value = on ? "brightness(1)" : "brightness(2)";
    div1.style.filter = div2.style.filter = value;

    on ^= true;
});