html - 定位一个元素，但希望所有后续元素都相应地定位

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>