html – 同名div将文本中的背景分割为position：static

两个兄弟div(#one和#two),每个包含一些文本.

我将#two移动到负边距顶部,并期望它覆盖#one,但是当文本位于#one前面时,背景位于下方.

仅当#one具有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

如果有人可以给出解释,将不胜感激

编辑：
我不是在寻找一种解决方法,但想了解内联块元素是如何呈现的

解决方法

TextText
_ _ _ _ _ _ _ _ _ _

可以安全地假设第二个元素将堆叠在另一个元素的顶部,因此当你使它们都占据相同的空间时,它会将它们合并在一起,如下所示：

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

这有点像两副卡片,然后将它们推到一起.

现在这都是基于它们的默认显示值块,这使它们完全相同：

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>

现在您所看到的是当您将第一个显示为显示时：inline-block;.内联元素将始终显示在块元素上方,因为这是Visual Formatting Model滚动的方式,但是这仅适用于元素,而不是文本内容,因此它的显示方式如下：

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>

我希望这有助于理解为什么它显示它的方式.当然,如果你改变他们的z-index就像下面三个人建议的那样,那么你把它们放在不同的平面上,如下所示：

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

（编辑：ASP站长网）