使用负边距导致的文字和背景分离的现象

现象描述

.div1 {
  background: red;
}
.div2 {
  margin-top: -15px;
  color: #fff;
  background: green;
}

<div class="div1">1</div>
<div class="div2">2</div>

如上代码，会发生反直觉现象：
div2的背景色盖住了div1的背景色，但是div1的文字却在div2的背景色之上

发生该现象的原因？

由于使用负边距时，元素仍然在正常的文档流中，并不存在元素级别的覆盖。
此时它们在同一层级，按照默制顺序绘制，背景和边框在最底层，内联元素（文字）在最上层，所以就有了上述反直觉的现象。

如何解决？

使用定位就行了，他们不在一个层级，就不会有这个问题了