Как сделать текст сверху в css

Текст сверху (или поверх) других элементов в CSS можно создать разными способами, в зависимости от того, какой именно эффект вам нужен.

Способ 1: свойство z-index

HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение">
  <h2 class="overlay">Текст над изображением</h2>
</div>

CSS:

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}

В данном примере мы создали блок div с классом container, в котором находится изображение и текст над ним. Затем мы задали блоку container свойство position: relative, чтобы дочерний элемент overlay мог относительно него находиться.

Для элемента h2 с классом overlay мы задали свойство position: absolute, чтобы он оказался выше изображения. Свойством top и left мы задали координаты элемента (в данном случае — находится он по центру блока), а свойством transform: translate(-50%, -50%) сместили его на половину ширины и высоты, чтобы он находился точно по центру. Свойством z-index мы задали элементу overlay значение 1, чтобы он оказался поверх изображения. Свойством background-color: rgba(255, 255, 255, 0.7) мы задали ему полупрозрачный белый фон, а свойством padding добавили отступы.

Способ 2: псевдоэлемент ::before

HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение">
  <h2>Текст под изображением</h2>
</div>

CSS:

.container {
  position: relative;
}

h2 {
  position: relative;
  z-index: 1;
}

h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
}

В данном примере мы создали блок div с классом container, в котором находится изображение и текст под ним. Затем мы задали блоку container свойство position: relative, чтобы дочерний элемент h2 мог относительно него находиться.

Для элемента h2 мы задали свойство position: relative, чтобы он оказался поверх изображения. Затем мы создали псевдоэлемент ::before и задали его свойства content: », position: absolute, top: 0, left: 0, width: 100%, height: 100% и z-index: -1, чтобы он занял всю область элемента h2 и оказался под ним. Свойством background-color: rgba(255, 255, 255, 0.7) мы задали ему полупрозрачный белый фон.