CSS Position For Div

Question

I have 2 main divs, one will be displayed while the other is hidden. When the hidden div appears, the previous one disappears. I know how to do that, using display block and none.

Divs A and B cover the whole screen. There should be no scroll bars showing, everything should be contained fully in what is visible in the browser window.

However, when div A is showing, the div C is also showing, even though div B (its parent) is hidden. Why?

<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 id="D" style="position: absolute; width: calc(100vw - 25px); height: 100vh; left: 25px; top: 0px;">
</div>

Answer 1

Add position relative to B tag to avoid C tag from jumping to A as new parent.

Stuff