情况如下:
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没有任何复杂样式(简单的背景颜色).我div通过应用否定来使第二个与第一个重叠margin-top.我期待看到一个完全重叠另一个,但事实并非如此.第二个div是在第一个内容和背景之间滑动,对我来说这是一个奇怪的行为.
这里的动画无关,我只是用它来更好地展示行为.我们可以简单地添加负边距而不用动画,我们会有同样的事情:
body {
margin: 0;
background: pink;
color: #fff;
}
.box { …