Размещение DIV-блоков поверх друг друга: CSS-трюки

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

Чтобы наложить один элемент DIV на другой, самый эффективный способ – использовать свойство position: absolute; для дочерних элементов, находящихся в контейнере со свойством position: relative;. Порядок слоев определяется с использованием z-index.

<div style="position: relative;">
  <div style="position: absolute; z-index: 1;">Нижний DIV</div>
  <div style="position: absolute; z-index: 2;">Верхний DIV</div>
</div>

DIV-элемент с z-index: 2 окажется поверх других. Разберемся подробнее с различными способами наложения.

Продвинутые техники наложения

Проанализируем несколько продвинутых методов, помогающих стать настоящим специалистом в наложении DIV-элементов:

Владение техникой display: grid

Сеточная система CSS Grid предоставляет прекрасные возможности для расположения элементов. Использование grid-area позволяет располагать их в одной ячейке сетки:

<div style="display: grid;">
  <div style="grid-area: 1 / 1;">Первый DIV</div>
  <div style="grid-area: 1 / 1;">Второй DIV</div>
</div>

Такие DIV-блоки будут находиться в одном месте, наложенные друг на друга.

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

Центрирование с помощью place-items:center

Добавление place-items:center к контейнеру со свойством display: grid помогает центрировать наложенные элементы:

<div style="display: grid; place-items: center;">
  <div style="grid-area: 1 / 1;">Центрированный DIV</div>
</div>

Управление видимостью при помощи visibility

"Играйте в прятки" со своими блоками при помощи visibility:hidden или display:none, чтобы сделать их невидимыми, не внося при этом изменений в общую композицию элементов:

<div style="position: relative;">
  <div style="position: absolute; visibility: hidden;">Скрытый DIV</div>
  <div style="position: absolute;">Видимый DIV</div>
</div>

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

Представьте наложение DIV-блоков как стопку блинов:

🥞🥞🥞: [Первый блин]
🥞🥞: [Второй блин]
🥞: [Третий блин]

Аналогично работает наложение элементов:

<div style="position: relative;"> <!-- Поднос готов! -->
    <div style="position: absolute; top: 0;">🥞 Основа</div>
    <div style="position: absolute; top: 0;">🥞 Средний слой</div>
    <div style="position: absolute; top: 0;">🥞 Вершина</div>
</div>

Здесь каждый DIV – это слой "блина", притянутый к верху с использованием position: absolute;.

Другие методы наложения

В мире веб-разработки существует множество вариантов решения этой задачи:

Плавающие элементы: использование float

С помощью float элементы могут "дрейфовать" влево или вправо, а затем мы обеспечиваем "очистку" от таких элементов с использованием clear:

<div style="float: left; clear: both;">Плавающий влево DIV</div>
<div style="float: right; clear: both;">Плавающий вправо DIV</div>

Меняем свойство display

Хотите стать профессионалом в изменении свойств отображения? Экспериментируйте с различными значениями свойства display, например inline-block, flex. Это изменит способы наложения и выравнивания элементов.

Тонкости и проблемы наложения

Несколько аспектов, на которые стоит обратить внимание при работе с наложением элементов:

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

Практика наложения

Пример наложения текста на изображение:

<div style="position: relative;">
  <img src="background.jpg" alt="Фон" style="position: absolute;">
  <p style="position: absolute; z-index: 1;">Текст поверх изображения</p>
</div>

Для зрителя это будет выглядеть как магия, но на самом деле это всего лишь умело написанный код.

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

1. CSS Layout – Свойство position — Всё, что нужно знать о наложении элементов на W3Schools.
2. z-index – CSS: Cascading Style Sheets | MDN — Глубокое понимание ТАЙН z-index на MDN Web Docs.
3. Полное руководство по Flexbox | CSS-Tricks — Информация о Flexbox, которую нельзя пропустить, на CSS-Tricks.
4. Z-Index CSS Property: Исчерпывающий обзор — Smashing Magazine — Подробное изучение темы наложения элементов на Smashing Magazine.
5. Сад Grid – игра для изучения CSS grid layout — Учите наложение элементов, играя в Сад Grid.