Наложение текста поверх изображения с помощью CSS

Чтобы расположить один элемент сверху другого, используется свойство z-index.

Содержание

Z-Index

Это свойство CSS устанавливает порядок элементов в стеке. Оно работает только с элементами, позиционированными с помощью position как absolute, relative, fixed, sticky. Но не static.

Допустим, что экран компьютера расположен – это фон, а реальный мир – на переднем плане. Каждый элемент без указанного z-index является слоем по умолчанию.

Чтобы разместить элемент на заднем фоне, его Z-index должен быть меньше 0. Элемент с наименьшим значением будет располагаться позади. Чтобы поместить элемент поверх слоя по умолчанию, используйте положительные значения Z-index. Чем больше число, тем выше элемент будет располагаться в стеке.

Вот еще несколько особенностей использования Z-index:

  • Элементы в стеке располагаются в порядке возрастания.
  • По умолчанию слой имеет z-index: 0.
  • Отрицательные значения z-index смещают элемент ниже слоя по умолчанию.
  • Элемент с наименьшим значением z-index будет расположен глубже всех.
  • Положительные значения смещают элементы выше слоя по умолчанию.
  • Элемент с наибольшим значением будет расположен впереди всех.

Пример

В примере я сместила изображение назад, установив z-index в -1. При этом не нужно указывать значение z-index для текста. Потому что для слоя оно равно 0, что больше, чем -1.

Интерактивные демо-версии

Вот примеры на Codepen и repl.it, с которыми вы можете поэкспериментировать.

Данная публикация представляет собой перевод статьи «CSS: Overlay Text Over Image» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню