Why does the text node appear above the background of the overlapping element?

Question

Let's assume we have a very simple HTML:

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; margin-top: -100px; }

<div id="a">a</div>
<div id="b">b</div>

In this case element b is fully overlapping element a but the letter "a" is visible anyway. Why is that?

I've already taken a look at a stacking order rules at https://www.w3.org/TR/CSS2/zindex.html and I was unable to find the answer.

Is the text node positioned differently? What am I missing?

I've created a sample Codepen here: https://codepen.io/anon/pen/KEaqaQ

Answer 1

You can solve this simply applying a position:relative; that will completely overlay the other div. Only giving it margin won't do the trick. Take a look

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; position:relative; margin-top: -100px; }

<div id="a">a</div>
<div id="b">b</div>