Как с помощью CSS наложить элементы друг на друга

При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.

Способ 1. Использование свойства Position

Свойство position со значением absolute разместит абсолютно позиционированный элемент на странице. В этом случае указывается позиция элемента относительно левого верхнего угла веб-страницы.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

При добавлении других элементов первый будет смещаться вниз. Это можно исправить, установив для родительского элемента position: relative. Тогда все дочерние элементы с position: absolute будут размещены абсолютно относительно верхнего угла родительского элемента.

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}
.parent {
  position: relative;
}

Также этот подход можно использовать для размещения одного элемента поверх другого. Например, два дочерних элемента, расположенных друг над другом, один из которых будет смещен на 150 пикселей. Они располагаются в одном родительском элементе и остаются внутри него.

<div class="parent">
  <h2>Parent</h2>
  <div class="child child-1">
    <h2>Child 1</h2>
  </div>
  <div class="child child-2">
    <h2>Child 2</h2>
  </div>
</div>
.child {
  position: absolute;
  top: 0;
}
.child-1 {
  left: 0;
}
.child-2 {
  left: 150px;
}
.parent {
  position: relative;
}

Способ 2. Использование CSS Grid

Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.

С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}
.child {
  grid-area: 1 / 1 / 2 / 2;
}

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

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}
.child {
  grid-area: 1 / 1 / 2 / 2;
}
.child-2 {
  margin-left: 200px;
}

Для облегчения позиционирования я создал CSS Grid Generator, который поможет вам визуально сконструировать необходимый макет.

Описанные выше методы позволяют накладывать элементы, создавать слои, управлять смещением элементов и их расположением на любой веб-странице.

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!

Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, лайки, подписки, отклики, дизлайки низкий вам поклон!

Сергей Бензенкоавтор-переводчик статьи «How to Stack Elements in CSS»