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

Наложение одного DIV элемента на другой DIV элемент без смещения

Доброго времени суток. Никак не удается наложить один див на другой.

 .panel < display: none; z-index: 2; position: relative; >.layer2

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

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

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

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

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

delphinpro

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

frontend developer

spoiler

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

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

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

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

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

.child

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

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

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

Parent

Child 1

Child 2

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

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

Наложение объектов

Очень важный момент, состоит в том, что z-index работает корректно только для элементов на одном уровне и с одинаковым набором свойств. Например элементы position:static и position:absolute имеют разную иерархию z-index Отдельные иерархии у элементов с float и opacity

Хак: Как переместить вложенный блок под родительский? По умолчанию вложенный блок всегда над. Но это можно изменить

.wrapper < position: relative; > .child < position: relative; z-index: -1; >

Обратите внимание, что для родителя z-index в этой ситуации ставить не нужно!

transition для z-index

Для z-index работает плавное изменение с помощью transition. Это можно использовать для появления элементов с разной скоростью.

opacity — задает полупрозрачность блока. 0 — полностью прозрачный блок, 1 — не меняет прозрачность блока, то есть непрозрачный блок остается непрозрачным.

div < opacity: 0.5; >

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

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

div class="parent"> div class="child"> div> div>

и если мы зададим стили следующим образом

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:1; width:200px; height:200px; background-color:orange; >

То у вложенного блока opacity всё-равно будет 0.5, то есть opacity вложенных блоков перемножаются.

Но если opacity больше единицы, то оно приводится к единице. То есть пример ниже будет аналогичен по внешнему виду примеру выше.

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:2; width:200px; height:200px; background-color:orange; >

visibility — определяет будет ли показываться элемент visible — элемент виден hidden — элемент скрыт

Отличие visibility:hidden от display:none в том, что блок будет попрежнему занимать место, хотя мы его не будем видеть. При display:none блок просто исчезнет со страницы

overflow — определяет что именно будет происходить с контентом, выходящим за пределы блока.

По умолчанию у объектов стоит значение visible

hidden — скроет все выступающие элементы
scroll — добавит в блок скроллинг. Не самое популярное решение, так как скроллинг уменшит область под контент.

div < width: 150px; height: 150px; overflow: scroll; >

Хак: Если у Вас margin-top вложенного блока переходит на родительский, то overflow:hidden у родительского блока, блокирует выход margin’a за пределы блока, и всё начинает работать так, как Вы этого ожидаете.

Хак: Если родительский блок «не замечает» вложенные float элементы, например высота height:auto у родительского элемента преобразуется в 0, то overflow:hidden у родительского блока также решает эту проблему.

Оверлеи

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

Рассмотрим один из способом создания оверлея

.overlay < width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; top:0px; left:0px; z-index:10; >

Нам нужно, чтобы затемнение закрыло весь экран, соответственно выставляем ширину и высоту во весь экран.

 height:100%; width:100%;

Фоновый цвет делаем черным, но полупрозрачным.

 background-color:rgba(0,0,0,0.5)

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

 position:fixed; top:0px; left:0px;

Наш оверлей всегда должен быть поверх всего остального, поэтому выставляем z-index большим.

 z-index:10

Ромб с фоновой картинкой

Поворачиваем квадрат с помощью трансформации на 45 градусов.

Вложенную картинку поворачиваем на -45 градусов

Фильтры

Полезное чтиво:

Четыре техники создания оверлеев http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Практика:

Два блока пересекаются. Сделать два варианта наложения одного блока на другой
Создание блока с полупрозрачным фоном и непрозрачным текстом. Фон — фотография
Создать оверлей поверх сайта
При наведении на блок, на нем последовательно появляются блоки(transition для z-index)
Наводим на блок и из него плавно выезжает меню
При наведении на гиперссылку, вокруг нее возникает выделение. Выделение должно собираться из окружающегося пространства. Пример http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
Верстка сайта с контентом в виде ромбиков (используем трансформации и position)
Сделать слайдер. Картинки меняются при наведении на навигационные кружочки
При наведении мышки на блок, фон, на котором он стоит размывается.
Есть фотография цветного товара, на однородном сером фоне. И есть цветные квадратики. При наведении на квадратик, товар окрашивается в цвет квадрата.
К низу сайта добавлен ярлык. При наведении на ярлык, всплывают пункты меню(подобно интерфейсу на мак)