Как сделать текст выше в css

Чтобы разместить текст поверх другого элемента в CSS, можно использовать свойство position и значение absolute или fixed в комбинации с свойствами top, right, bottom и left. Это позволяет разместить элемент в любой точке на странице независимо от других элементов на странице.

Пример:

HTML:

<div class="parent">
  <img src="image.jpg">
  <p class="text">Текст над изображением</p>
</div>

CSS:

.parent {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

В этом примере мы создаем контейнер .parent, который содержит изображение и абзац с текстом. Затем мы добавляем свойство position: relative; для контейнера, чтобы абзац мог быть позиционирован относительно контейнера.

Затем мы задаем свойство position: absolute; и используем свойства top, left, transform, чтобы разместить абзац в верхней середине изображения. Свойство transform: translate(-50%, -50%); позволяет точно позиционировать элемент относительно центра контейнера. Мы также задаем фон и цвет текста для абзаца, чтобы он был легко читаемым.

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