Предотвращение наложения текста

Question

Ниже приведен мой код, моя цель - не допустить, чтобы div с идентификатором «description» перекрывался с div с именем класса «container_display». Как мне этого добиться? Я хочу, чтобы второй div показывался внизу изображения.

#container_display {
    position: relative;
}

#container_display img {
    position: absolute;
    top: 0;
    left: 0;
}

<div id="container_display">
    <img src="image1.png" />
    <img src="image2.png" />
</div>

<div id="description">TEXT HERE</div>

Answer 1

Вам не нужно это:

#container_display img {
    position: absolute;
    top: 0;
    left: 0;
}

Вы также можете добавить разрыв между двумя элементами, чтобы создать пространство между ними, например:

<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div> 
<br>
<div id="description">TEXT HERE</div>

Answer 2

Вам необходимо установить высоту для контейнера, потому что абсолютно позиционированные элементы не считаются занимающими ширину или высоту в контейнере.

Подробности в MDN :

absolute

Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места

#container_display {
  position: relative;
  height: 60px;
}

#container_display img {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}

<div id="container_display">
  <img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
  <img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>

<div id="description">TEXT HERE</div>

Есть один способ «взломать его», который заключается в том, чтобы поместить туда одно изображение stati c и сделать его visibility: hidden, который должен занять пробел, но не виден, и position обратно на static:

#container_display {
  position: relative;
}

#container_display img {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}

#container_display .spacer {
  visibility: hidden;
  position: static;
}

<div id="container_display">
  <img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
  <img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
  <img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>

<div id="description">TEXT HERE</div>