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