Question

两个兄弟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

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

修改：我不是在寻找一种解决方法，但想了解inline-block元素的呈现方式

Answer 1

两个元素都在同一层，就像在兄弟姐妹中一样。这使他们在同一个平面上。所以实际上你的两层就像这样：

文本文本
_ _ _ _ _ _ _ _ _ _

可以安全地假设第二个元素将堆叠在另一个元素之上，所以当你使它们都占据相同的空间时，它会将它们合并在一起：

文本
文本
_ _ _ _ _
_ _ _ _ _ _

有点像有两副纸牌，然后将它们推到一起。

现在这都基于它们的默认显示值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;。内联元素将始终显示在块元素上方，因为这是Visual Formatting Model滚动的方式，但这只适用于元素，而不是文本内容，因此它显示为：

文本
文本
_ _ _ _ _
_ _ _ _ _ _

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就像下面三个人所建议的那样，那么你把它们放在不同的平面上，如下所示：

文本
_ _ _ _ _
文字
_ _ _ _ _

Answer 2

所以我发现这个answer并不完全符合您的情况，但它很接近且信息良好。主要是Elaborate description of Stacking Contexts，这将告诉您HTML如何呈现元素。

我通常会通过在违规元素上设置position: relative;来解决此问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您添加了position: relative和相关的z-index值，那么这应该有效......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

兄弟姐妹div从文本中分割背景，位置为：static

4 个答案: