Наложение текста поверх изображения с помощью 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 будет расположен глубже всех.
  • Положительные значения смещают элементы выше слоя по умолчанию.
  • Элемент с наибольшим значением будет расположен впереди всех.

Пример

Наложение текста поверх картинки при помощи CSS

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *