CSS: Как разместить объекты под абсолютно позиционированными объектами?

Question

HTML:

<div class="header-shapes">
        <img class="circle" src="images/home/circle.png" alt="">
        <img class="triangle" src="images/home/triangle.png" alt="">
        <img class="square" src="images/home/square.png" alt="">
</div>

<table>
        <tr>
            ...
        </tr>

</table>

Я хочу, чтобы div с формами заголовков занимал весь экран, а таблица отображалась под формами заголовков. Вот моя проблема: я хочу, чтобы таблица отображалась после этих изображений. Однако, поскольку изображения в формах заголовков позиционируются абсолютно, таблица появляется сверху div-форм заголовков вместо того, чтобы появляться после.

Как сделать так, чтобы таблица отображалась после размещенных мной изображений?

Моим первоначальным решением было:

table {
    margin-top: 500px; 
}

, но это кажется очень грубым принуждением.

Я также думал о том, чтобы сделать:

.header-shapes  {
    height: 768px;
}

Кажется, это работает, но я не знаю, очень ли это профессиональный способ сделать это.

Answer 1

Вы можете удалить position:absolute;, чтобы таблица отображалась под вашими фигурами. если вы действительно хотите использовать абсолютное положение, добавьте относительно позиционированный контейнер с высотой перед вашими абсолютно позиционированными элементами.

<div class="header-parent">
<div class="header-shapes">
    <img class="circle" src="images/home/circle.png" alt="">
    <img class="triangle" src="images/home/triangle.png" alt="">
    <img class="square" src="images/home/square.png" alt="">

.header-parent {
position:relative;
height: 500px;

}