Как с помощью 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, который поможет вам визуально сконструировать необходимый макет.

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

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