定位一个元素，但要随后的所有元素相应地定位

Question

使用CSS。我想放置一个元素，并让其他元素在页面上相应地放置自己。我是否必须分别定位每个位置，或者是否可以使用css命令使位置彼此跟随？

在页面的某一点上，我希望每个元素与之前的元素重叠。因此，每个人都应该向上移动一点，使其与上方的人重叠。有没有办法让所有元素都遵循第一个元素，还是我需要手动进行每个元素？

Answer 1

您可以设置一个CSS规则，告知除组中的第一个元素之外的所有元素的上边距为负，这将使它们彼此重叠。

.overlap {
  background: grey;
  border: 5px solid black;
  width: 80px;
  height: 80px;
}
.overlap + .overlap {
  margin-top: -40px;
}

<div class="overlap"></div>
<div class="overlap"></div>
<div class="overlap"></div>
<div class="overlap"></div>
<div class="overlap"></div>