Подскажите, как опустить текст на картинку

Question

Как опустить текст на картинку,чтоб из этого получить это ? ( Мне посоветовали добавить position: relative для .psila и position: absolute для .tsila: ,но после этого уходит текст под картинку,а не на нее )

.sila {
      text-align: center;
      font-size: 56px;
      font-weight: 1000;
      color: #1d1d1f;
    }

    .tsila {
      text-align: center;
      font-size: 21px;
    }

    .tsila h1 {
      font-size: 48px;
    }

    .tsila h5 {
      font-family: 'SanFranciscoLight';
      font-weight: 400;
      font-size: 21px;
    }

    .tsila a {
      color: #0066cc;
      text-decoration: none;
    }

    .tsila a:hover {
      text-decoration: underline;
    }

<div class="sila">
    <p>В чём сила iPhone?</p>
</div>

<div class="tsila">
    <h1>iOS 15</h1>
    <br>
<h5>На связи. В моменте.</h5>
<br>
<p><a href="#">Подробнее ></a></p>
</div>

<div class="psila">
    <img src="static/images/image.psd (5).png" alt="">
</div>

Answer 1

Жёлтый цвет - это картинка будет в вашем случае)).
"position: relative" нужно давать родителю, а "position: absolute" внутренним элементам, при этом внутренний элемент будет позиционироваться относительно того родителя, у которого он встретит "position: relative" первым.
У вас до этого у ".psila" не было родителя, я создал его ".wsilla" и дал ему "position: relative"

body {
  margin: 0;
}
.sila {
  text-align: center;
  font-size: 56px;
  font-weight: 1000;
  color: #1d1d1f;
  display: flex;
  justify-content: center;
}

.tsila {
  text-align: center;
  font-size: 21px;
}

.tsila h1 {
  font-size: 48px;
}

.tsila h5 {
  font-family: 'SanFranciscoLight';
  font-weight: 400;
  font-size: 21px;
}

.tsila a {
  color: #0066cc;
  text-decoration: none;
}
.tsila a:hover {
  text-decoration: underline;
}
.wsilla {
  position: relative;
}
.psila {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}
img {
  background-color: yellow;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="wsilla">
  <div class="sila">
      <p>В чём сила iPhone?</p>
  </div>

  <div class="tsila">
      <h1>iOS 15</h1>
      <br>
    <h5>На связи. В моменте.</h5>
    <br>
    <p><a href="#">Подробнее ></a></p>
  </div>

  <div class="psila">
      <img src="static/images/image.psd (5).png" alt="">
  </div>
</div>

БЛОГ НА HUSL

Подскажите, как опустить текст на картинку

Ответы (1 шт):