I have a main #slider div containing multiple images. Each image is set to position: absolute; for automatic resizing within the slider.
The issue arises when setting images this way, causing the height of the #slide div to become zero and preventing content from being placed below it.
Currently, the text appears behind the images. I am looking to position the text below the #slide.
Are there any solutions to resolve this problem?
#slide {
position: relative;
width: 100%;
object-fit: cover;
margin: 0 auto;
}
#slide-list {
margin: 0 auto;
position: relative;
width: 1170px;
height: 100%;
display: flex;
flex-flow: row;
}
.slide-l-quarter {
position: relative;
width: calc(100% / 4);
height: auto;
margin: 0 5px;
}
.slide-l-quarter img {
position: absolute;
width: 100%;
height: auto;
}
#text {
font-size: 40px;
}<section id="slide">
<div id="slide-list">
<ul class="slide-l-quarter">
<img src="https://i.imgur.com/dsey4pc.jpg" alt="">
</ul>
<ul class="slide-l-quarter">
<img src="https://i.imgur.com/dsey4pc.jpg" alt="">
</ul>
<ul class="slide-l-quarter">
<img src="https://i.imgur.com/dsey4pc.jpg" alt="">
</ul>
<ul class="slide-l-quarter">
<img src="https://i.imgur.com/dsey4pc.jpg" alt="">
</ul>
</div>
<div id="text">
Some Text
</div>
</section>