Html 向上平移元素并影响流

我想向上翻译一个元素，并使文档流也发生移动。在本例中：

.x{
背景颜色：紫色；
}
.a{
高度：300px；
背景颜色：绿色；
}
.b{
高度：300px；
背景色：红色；
位置：相对位置；
顶部：-50px；
}

---

我将一个元素向上移动以重叠，但是我希望文档在元素的新位置结束。换句话说，紫色部分不应显示在示例中。

您需要使用

边距

，而不是

顶部

。

top

属性独立于文档流移动元素，基本上保持元素在文档流中的原始位置，而不是影响元素

.x{
背景颜色：紫色；
}
.a{
高度：300px；
背景颜色：绿色；
}
.b{
高度：300px；
背景色：红色；
位置：相对位置；
利润上限：-50px；
}

---

您需要使用

边距

而不是

顶部

。

top

属性独立于文档流移动元素，基本上保持元素在文档流中的原始位置，而不是影响元素

.x{
背景颜色：紫色；
}
.a{
高度：300px；
背景颜色：绿色；
}
.b{
高度：300px；
背景色：红色；
位置：相对位置；
利润上限：-50px；
}

<div class="x">
  <div class="a"></div>
  <div class="b"></div>
</div>

.x {
  background-color: purple;
}

.a {
  height: 300px;
  background-color: green;
}

.b {
  height: 300px;
  background-color: red;

  position: relative;
  top: -50px;
}