html - 兄弟 div 从位置为 :static 的文本中拆分背景

Question

两个同级 div(#one 和 #two)，每个都包含一些文本。

我移动#two margin-top 为负，预计它会覆盖 #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

如果有人能给出解释，我们将不胜感激

---

编辑:我不是在寻找解决方法，而是想了解如何 inline-block正在渲染元素

Answer 1

两个元素都在同一层中，就像它们是 sibling 一样。这使它们处于同一平面上。所以实际上你的两层是这样的:

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

假设第二个元素将堆叠在另一个之上是安全的，所以当你让它们占据相同的空间时，它会像这样将它们合并在一起:

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

这有点像有两副纸牌，然后将它们放在一起。

现在这一切都基于它们都是它们的默认显示值 block，这使得它们完全相同:

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>

现在您看到的是将第一个作为 display:inline-block;。内联元素将始终显示在 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
           _ _ _ _ _