Позиционирование изображений друг на друге в HTML без композитинга

Быстрый ответ

Для наложения одного изображения на другое применяется позиционирование CSS. Окружите оба изображения контейнером div, которому присвоено свойство position: relative;. Элементу изображения на верхнем слое задайте position: absolute; и корректируйте top и left для точного расположения.

Пример кода:

<div style="position: relative;">
  <!-- Основное изображение -->
  <img src="background.jpg" alt="" style="width: 100%;">
  <!-- Изображение, которое будет расположено сверху -->
  <img src="overlay.png" alt="" style="position: absolute; top: 0; left: 0; width: 100%;">
</div>

overlay.png будет наложено на background.jpg. Координаты top и left регулируйте с учётом желаемого дизайна.

Более продвинутые методы позиционирования

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

Псевдоэлементы к вашим услугам

С помощью псевдоэлементов ::before и ::after с position: relative; и content: "" можно уменьшить количество HTML-элементов.

Подробнее об этом расскажет наш спикер на видео

Адаптивный дизайн

При создании адаптивного (отзывчивого) дизайна используйте процентные значения или относительные единицы для top и left. Свойства background-size: cover; или contain; обеспечивают корректное масштабирование фонового изображения.

Современные методики позиционирования — ваш надёжный друг

Мощь CSS-фреймворков, Grid и Flexbox лишь подчёркивает их эффективность:

Фреймворки: Bootstrap и Foundation

Воспользовавшись фреймворками, например, Bootstrap или Foundation, вы сможете упростить процесс благодаря уже предопределённым классам CSS.

CSS Grid и Flexbox

В сложных макетах CSS Grid и Flexbox существенно облегчат управление расположением элементов.

Советы и рекомендации

• Режим position: absolute применяется к элементам в контексте ближайшего родительского элемента с позиционированием.
• Избегайте излишнего использования div, применяя псевдоэлементы и свойство CSS background-image.
• Соблюдайте правильность потока документа и удобство использования, чтобы элементы с абсолютным позиционированием не мешали восприятию остального контента.

Визуализация

Давайте предложим принцип наложения изображений как игру с картами и несколькими колодами:

🂠 – Карта 1 (расположена снизу)
🂡 – Карта 2 (расположена сверху)

Применим позиционирование CSS для достижения результата:

🂠 
  position: relative;
🂡 
  position: absolute;
  top: 0;
  left: 0;

Так, карта 2 🂡 накладывается на карту 1 🂠 с использованием чёткого позиционирования.

Практическая реализация: живые примеры:

1. Наложение логотипа: можно разместить логотип используя top: 10px; left: 10px;.
2. Интерактивные галереи изображений: при наведении курсора отображайте наложенные элементы с помощью события :hover.
3. Аннотации: элементы иконок или текста можно точно разместить на изображении.

Лучше всего концепцию демонстрировать на примерах в интерактивных средах, например, на площадках CodePen или JSFiddle.

Полезные материалы

1. position – CSS: Каскадные таблицы стилей | MDN
2. Stacking context – CSS: Каскадные таблицы стилей | MDN
3. z-index – CSS: Каскадные таблицы стилей | MDN
4. Абсолютное позиционирование внутри относительного позиционирования | CSS-Tricks
5. Полное руководство по Flexbox | CSS-Tricks
6. Сеточная компоновка CSS – CSS: Каскадные таблицы стилей | MDN
7. Адаптивные изображения в CSS | CSS-Tricks