Как расположить блоки с абсолютном позиционированием друг под другом?

Для расположения блоков с абсолютным позиционированием друг под другом в HTML, можно воспользоваться следующим подходом:

1. Первым делом нужно убедиться, что у родительского контейнера (например, div) установлено значение position: relative;. Это позволяет дочерним элементам с абсолютным позиционированием опираться на расположение родительского контейнера.

2. Затем для каждого дочернего блока, который должен быть расположен под предыдущим, устанавливаем следующие стили:

.child-block {
    position: absolute;
    top: 100%; /* Устанавливаем расстояние от верхней границы родителя до верхней границы текущего блока */
    left: 0; /* Устанавливаем сдвиг слева относительно левой границы родителя */
}

3. При таком подходе каждый следующий блок будет отталкиваться от нижней границы предыдущего блока и автоматически позиционироваться под ним.

Пример HTML-кода:

<div class="parent-block">
    <div class="child-block">Первый блок</div>
    <div class="child-block">Второй блок</div>
    <div class="child-block">Третий блок</div>
</div>

Пример CSS-кода:

.parent-block {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.child-block {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: lightblue;
}

Таким образом, блоки с абсолютным позиционированием будут размещены друг под другом внутри родительского контейнера, как это описано в CSS-стилях.