Sibling div splitting background from text with position:static

Question

Two sibling divs (#one and #two) each containing some text.

I move #two with negative margin-top and would expect it to cover #one, but while text gets positioned in front of #one, the background get's positioned underneath.

This happens only when #one has display:inline-block.

div {
    width:110px;
    height:100px;
    font-size:55px;
    font-weight:900;
    text-align:center
}
#one {
    display:inline-block;
    background:yellow;
}
#two {
    background:purple;
    color:pink;
    margin-top:-90px;
    margin-left:20px;
}

<div id='one'>one</div>
<div id='two'>two</div>

fiddle

If anybody could give an explanation it would be appreciated

---

EDIT: I'm not looking for a workaround but would like to understand how inline-block element is being rendered

Answer 1

Both elements are in the same layer, as in, they are siblings. This puts them on the same plane. So in effect your two layers are sitting like this:

  Text                   Text
_ _ _ _ _            _ _ _ _ _

It would be safe to assume that the second the two elements would be stacked on top of the other, so when you make them both occupy the same space, it's merging them together like this:

  Text               
    Text
_ _ _ _ _       
     _ _ _ _ _

Which is sort of like have two decks of cards and then pushing them together.

Now this is all based upon both of them being their default display value of block, which makes them exactly the same:

div {
    width:110px;
    height:100px;
    font-size:55px;
    font-weight:900;
    text-align:center
}
#one {
    background:yellow;
}
#two {
    background:purple;
    color:pink;
    margin-top:-90px;
    margin-left:20px;
}

<div id='one'>one</div>
<div id='two'>two</div>

Now what you're seeing is when you put the first one as display:inline-block;. Inline elements will always display above Block elements because that's the way the Visual Formatting Model rolls, however that will only apply to the element, not the text content so that's why it's displaying like:

    Text
  Text               
_ _ _ _ _       
     _ _ _ _ _

div {
    width:110px;
    height:100px;
    font-size:55px;
    font-weight:900;
    text-align:center
}
#one {
    display:inline-block;
    background:yellow;
}
#two {
    background:purple;
    color:pink;
    margin-top:-90px;
    margin-left:20px;
}

<div id='one'>one</div>
<div id='two'>two</div>

I hope that helps understand why it's displaying the way it is. Of course if you change their z-index like the three people below have suggested then you put them on different planes like so:

  Text
_ _ _ _ _
              Text
           _ _ _ _ _