How to make parent element cover children if they are positioned absolute - html

Question

I want to create a slider, so here is the code:
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>
It kinda works (I would just change left property to move them), but since parent (div#list_container) is positioned as relative, so it doesn't cover children elements, so another elements, which will go after slider are shown above it. How can I fix it?

Answer 1

When you change position of child elements to absolute, they are no longer relative to their parent element. Either make parent absolute while changing children's position to relative, or add height to parent.
I also highly recommend implementing this using CSS Flexbox, otherwise it will be very difficult to maintain. See if you can work with this:
#list_container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-around;
}
#list_container > *{
flex-grow: 1;
}

Answer 2

The problem is that, since your child elements are with absolute positioning, there is nothing that actually expands the box of the parent element. To fix it, you can add height to the div#list_container, depending on your design target.