父div B设置display:none时，其绝对定位子元素C仍显示是什么原因？

问题原因 #

核心问题是你的HTML代码存在标签未正确闭合的语法错误，导致浏览器解析出的DOM结构和你预期的不符。

• 你提供的代码中，id为C、D的两个div都没有写对应的闭合</div>标签，父元素B的闭合标签会被浏览器错误匹配到更早的位置，最终C、D会被解析为和A、B平级的独立元素，并不属于B的子节点。此时你给B设置display: none仅会隐藏B本身，不会影响到层级外的C元素，因此C会一直显示。你可以打开浏览器开发者工具的元素面板，查看实际解析出的DOM结构就能验证这一点。
• 额外说明：正常场景下，只要元素确实是display: none节点的子元素，无论子元素使用绝对/固定/相对定位，都会跟随父元素一同从渲染树中被移除，不会出现子元素脱离父元素显隐控制的情况。

修复方案 #

补全所有缺失的div闭合标签即可，修复后代码如下：

<div id="A" style="display: block; width: 100vw; height: 100vh;">
    Stuff
</div>
<div id="B" style="display: none; width: 100vw; height: 100vh;">
    <div id="C" style="position: absolute; width: 25px; height: 100vh; left: 0px; top: 0px;">
    </div>
    <div id="D" style="position: absolute; width: calc(100vw - 25px); height: 100vh; left: 25px; top: 0px;">
    </div>
</div>

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