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

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

Как наложить текст поверх картинки CSS? 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»