How do i get my other elements to not go under my position div?

How to i get my description div to not go under my img div when I reduce to size of my browser window? I've noticed that with positioning it doesn't behave normally at all it acts like its layering over everything it comes in contact with.

This is an example of a project im practing where I need to fix that issue:

Html:

<article class="card__luffy">

\<div class="img__luffy"\> \<img src="images/luffy/Gear 5.jpg" alt="" width="250" height="200" class="one__luffy"\> \<img src="images/luffy/Monkey D Luffy - One Piece colored manga.jpg" alt="" width="320" height="320" class="two__luffy"\> \<img src="images/luffy/Register - Login.jpg" alt="" width="150" height="150" class="three__luffy"\> \</div\> \<div class="description"\> \<h2\>Monkey D Luffy\</h2\> \<div class="dash"\>\</div\> \<p\>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente maxime, soluta magni assumenda voluptas neque modi? Odio nulla earum, sed debitis autem facilis ea magni consectetur blanditiis, quam dolores! Libero. \</p\> \<a href="#"\>Learn more\</a\> \</div\> \</article\>

Css:

article {

display: flex; position: relative; height: 500px; gap: 50px;

}

.description {

width: 50%;

}

article .card__luffy {

position: relative;

}

.img__luffy {

position: relative; width: 50%;

}

.one__luffy,

.two__luffy,

.three__luffy {

position: absolute; top: 0; left: 0;

}

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.