Расположите элемент, но хотите, чтобы все последующие элементы располагались соответственно

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>