Как сделать так, чтобы родительский элемент перекрывал дочерние элементы, если они позиционируются абсолютным образом

Question

Я хочу создать слайдер, вот его код:

div#list_container {
    position: relative;
    width: 100%;
}
div#first_list {
    position: absolute;
    left: 0px;
    top: 0px;
}
div#second_list {
    position: absolute;
    left: 70%;
    top: 0px;
}

<div id="list_container">
    <div id="first_list">
        <h1>Smth</h1>
    </div>

    <div id="second_list" class="aim_list">
        <h1>Smth</h1>
    </div>
</div>

<h2>Following elements</h2>

Это вроде как работает (я бы просто изменил свойство left, чтобы переместить их), но поскольку родительский (div#list_container) позиционируется как относительный, поэтому он не охватывает дочерние элементы, поэтому над ним будут показаны другие элементы, которые будут go после ползунка. Как исправить?

Answer 1

Когда вы меняете положение дочерних элементов на абсолютное, они больше не относятся к их родительскому элементу. Либо сделайте родительский элемент абсолютным при изменении положения детей на относительное, либо добавьте высоту к родительскому объекту.

Я также настоятельно рекомендую реализовать это с помощью CSS Flexbox, иначе его будет очень сложно поддерживать. Посмотрите, сможете ли вы с этим работать:

#list_container {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;

}


#list_container > *{
    flex-grow: 1;
}

Answer 2

Проблема в том, что, поскольку ваши дочерние элементы имеют абсолютное позиционирование, нет ничего, что фактически расширяет поле родительского элемента. Чтобы исправить это, вы можете добавить высоту к div#list_container, в зависимости от вашей проектной цели.