How do i use position absolute on a flex item without it disappearing?

15 hours ago 3
ARTICLE AD BOX

I'm at lost right now, and would appreciate any help please. I've been trying to layering images over each other using positioning but they keep disappearing when I mame them position absolute.

how do I get it too work? I just want to layer 3 images over each while keeping my overall webpage layout as flex cause its easier to control.

Note: this is an example code based off my exact method just too keep it simple.

Html code:

<article class="container">

<div class="img__container">

<div class="img__one">

<Img src="book.png">

</div>

<div class="img__two">

<Img src="book__two.png">

</div>

<div class="img__three">

<Img src="book__three.png">

</div>

</div>

<div class="description">

<h1>Books</h1>

</div>

</article>

Css code:

Img {

max-width: 100%;

height: auto;

}

.container {

display: flex;

Gap: 30px;

}

.img__container {

display: flex;

position: relative;

}

.img__one {

position: absolute;

}

.img__two {

position: absolute;

}

.img__three {

position: absolute;

}

Read Entire Article