两个兄弟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>
如果有人可以给出解释,将不胜感激
编辑：
我不是在寻找一种解决方法,但想了解内联块元素是如何呈现的
解决方法
两个元素都在同一层,就像它们是兄弟姐妹一样.这使他们在同一个平面上.所以实际上你的两层是这样的：
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 _ _ _ _ _
