将元素向上转换并影响流量

Question

我想向上移动一个元素，并使文档流也移动。在此示例中：

https://codepen.io/jauhar/pen/JjomyzO

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

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

Answer 1

您需要使用margin而不是top。 top属性移动元素，而与文档流无关，并且基本上将元素保留在文档流中的原始位置，而不是影响它。