Как наложить один блок на другой в css

Как наложить один div на другой?

В одном диве реализовывается анимация из библиотеки партиклз, а во втором диве идет текст и картинка. Мне нужно, чтоб первый див с анимацией был задним фоном, а второй див с текстом поверх него. Я поместил один в другой, все равно они идут попорядку.

1 2 3 4 5 6 7 8 9 10 11 12

div id="particles-js"> div class="container"> h1> img class ="AnimateLogo" src="assets/img/лог.png" width="200" height="200"/> /h1> h2>ТЕКСТ/h2> p style="color:orangered;font-family:Arial;font-size:17px;"> ТЕКСТ ТЕКСТ /p> /div> /div>

Получается что-то типа одного блока с анимацией, а затем ниже отдельный блок с текстом и картинкой. Как я понимаю, надо что-то добавить в стилях.

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

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

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

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

.child

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

.child < /* . */ position: absolute; top: 0; left: 0; >.parent

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

.child < position: absolute; top: 0; >.child-1 < left: 0; >.child-2 < left: 150px; >.parent

Способ 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

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

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

Как наложить один элемент на другой?

Не могу понять как сделать «многослойность» как на скрине. Нужно что бы красный блок был поверх белого + что бы было смещение как на скрине.
Буду очень благодарна всем кто поможет!

• Вопрос задан более года назад
• 423 просмотра

Комментировать

Решения вопроса 2

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

spoiler

Ответ написан более года назад

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

Давайте посмотрим следующий пример, чтобы понять, как это работает:

В приведенном выше примере элемент div с классом .stack-top будет расположен поверх другого div .

Подробнее см. Руководство по позиционированию в CSS, чтобы узнать больше о методах позиционирования CSS.

Читайте также

Похожие примеры:

• Как разместить текст поверх изображения с помощью CSS
• Как центрировать выравнивание с абсолютным позиционированием div с помощью CSS
• Как создать фиксированный header или footer с помощью CSS