Как разместить текст поверх тега «img»?

Question

[San Manjiro]

У менять есть два тега "p" и два тега "img" и на странице получается так, что картинки перекрывают текст, как это можно исправить?

<div class="advertisement-content">
    <div class="advertisement-content-text">
      <p class="advertisement-content-text__title">
        {{t('advertisementBoard.text-title')}}
      </p>
      <p class="advertisement-content-text__basic">
        {{t('advertisementBoard.text-basic')}}
      </p>
      <img class="advertisement-content-text__balls-left" src="/img/advertisement/balls_left.png" alt="">
      <img class="advertisement-content-text__balls-right" src="/img/advertisement/balls_right.png" alt="">
    </div>
    <div class="advertisement-content__footer">
      <img src="/img/advertisement/footer.png" alt="">
    </div>
  </div>

.advertisement-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.advertisement-content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.advertisement-content-text__balls-left {
  position: absolute;
  left: 30px;
  top: 83px;
}
.advertisement-content-text__balls-right {
  position: absolute;
  top: 55.50px;
  right: 143px;
}
.advertisement-content-text__title {
  font-style: normal;
  font-weight: 23.80vw;
  font-size: 4.76vw;
  text-transform: uppercase;
  color: #1899D3;
  padding-top: 11vw;
}
.advertisement-content-text__basic {
  font-family: 'Gotham Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 2.97vw;
  line-height: 135%;
  letter-spacing: -0.01em;
  color: #484848;
  width: 79.64vw;
  text-align: justify;
  margin-top: 6.54vw;
}
.advertisement-content__footer img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Answer 1

[Ankhena]

Давайте начнем сначала: на вашем скине нет ни одного тега img.
Ни одна из картинок не является контентной.
Их всех хорошо бы убрать в стили, фоном или фоном псевдоэлементов.

Ну и тогда ваш вопрос отпадет сам собой: текст всегда поверх фона.

Comments

[San Manjiro]

спасибо за ответ, но я решил уже эту проблему) я просто своим тегам "img" присвоил css стиль "z-index: -1" и они стали ниже текста.

[Евгений Залецкий]

Михаил Ларионов, вы сделали костыль, а не решили проблему) Если добавить ещё текст, то текст снова будет в фоне)))

[Ankhena]

Михаил Ларионов, угу, это действительно костылик.
Потому что кроме того, что вы видите на экране, есть ещё читалки, роботы и т.д.