Как мне сделать так, чтобы другие элементы не попадали под мою позицию div? ⇐ CSS

[Anonymous]

Как мне сделать так, чтобы мой div описания не помещался под мой img div, когда я уменьшаю размер окна браузера до размера? Я заметил, что при позиционировании он вообще не ведет себя нормально, он действует как наслоение на все, с чем соприкасается.
Это пример проекта, в котором мне нужно исправить эту проблему:
Html:

Код: Выделить всё

      \

\
[img]images/luffy/Gear 5.jpg[/img]

\
[img]images/luffy/Monkey D Luffy - One Piece colored manga.jpg[/img]
class="two__luffy"\>

\
[img]images/luffy/Register - Login.jpg[/img]

\

\

\Monkey D Luffy\

\\

\
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.

\

\Learn more\

\

\

Css:
статья {

Код: Выделить всё

display: flex;

position: relative;

height: 500px;

gap: 50px;

.description {

Код: Выделить всё

width: 50%;

статья .card__luffy {

Код: Выделить всё

position: relative;

.img__luffy {

Код: Выделить всё

position: relative;

width: 50%;

}
.one__luffy,
.two__luffy,
.three__luffy {

Код: Выделить всё

position: absolute;

top: 0;

left: 0;

}

Подробнее здесь: https://stackoverflow.com/questions/798 ... sition-div