这是情况：
body {
margin: 0;
background: pink;
color: #fff;
}
.box {
margin-top: 20px;
background: red;
}
.bottom {
text-align: right;
background: green;
animation: animate 2s infinite alternate linear;
}
@keyframes animate {
from {
margin-top: 10px;
}
to {
margin-top: -40px;
}
}<div class="box">
some content
</div>
<div class="bottom">
other content
</div>发生了什么？
正如您所看到的，我们有两个没有任何复杂样式的 div（仅有背景颜色）。我通过应用负 margin-top 来使第二个 div 重叠在第一个上面。我希望看到一个 完全覆盖 另一个，但事实并非如此。第二个 div 在第一个的内容和背景之间滑动，这对我来说是一种 奇怪 的行为。
这里与动画无关，我只是用它来更好地展示这种行为。我们可以简单地添加负边距而不使用动画，就会得到相同的结果：
body {
margin: 0;
background: pink;
color: #fff;
}
.box {
margin-top: 20px;
background: red;
}
.bottom {
margin-top:-10px;
text-align: right;
background: green;
}<div class="box">
some content
</div>
<div class="bottom">
other content
</div>我的问题是：为什么会出现这样的行为？
顺便说一下，我们都知道在CSS中存在一些棘手的问题，当我们第一次面对它们时并不会怀疑（例如margin折叠，从body到html的背景传播，空格问题等），但是它们在某处被清楚地解释了。我希望能找到一个官方资源，在那里我可以清楚地理解这个问题，并且不仅仅得到像"也许这是因为..."，"我怀疑这与...有关"，"我认为这与...有关"之类的东西。
我对此的看法/解释
我认为文本等内容比背景和其他视觉样式更重要，因此当我们有重叠的情况时，我们将所有文本放置在顶部，将所有其他样式放置在底部，我们决定每个组内部的顺序，然后输出结果。
以下是一个更复杂的例子：
body {
margin: 0;
background: pink;
color: #fff;
}
div {
font-size: 39px;
line-height: 28px;
margin-bottom: -20px;
font-weight: bold;
}
body :nth-child(1) {
background: red;
border:3px solid brown;
}
body :nth-child(2) {
background: blue;
border:3px solid yellow;
color: #000;
}
body :nth-child(3) {
background: green;
border:3px solid orange;
}<div>
some content
</div>
<div>
other content
</div>
<div>
more content
</div>我们可以清楚地看到，视觉堆栈如下（从下到上）：
- 第一个 div 的样式（背景 + 边框）
- 第二个 div 的样式（背景 + 边框）
- 第三个 div 的样式（背景 + 边框）
- 第一个 div 的文本内容
- 第二个 div 的文本内容
- 第三个 div 的文本内容
重要提示：在回答之前，请注意我不是在寻求解决方法或如何避免这种情况。仅通过添加position:relative就可以消除这种行为，然后我们可以使用z-index来决定堆叠顺序。我想了解为什么会发生这种情况。
