兄弟姐妹div从文本中分割背景:position:static

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>

小提琴

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

---

编辑:我不是在寻找一种解决方法,但想了解inline-block元素的呈现方式

Answer 1

所以我发现这个答案并不完全符合您的情况，但它很接近并且有很好的信息。主要是对 Stacking Contexts 的详细描述，这将告诉你 HTML 如何渲染元素。

position: relative;我通常通过设置有问题的元素来修复它。

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;
}

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