Какое css свойство позволяет управлять порядком наложения элементов

Эта статья учебника будет посвящена очень важной теме, которая связана с позиционированием элементов на странице, она потребует от Вас максимального внимания. Вы познакомитесь с такими типами позиционирования элементов как: абсолютное, относительное, фиксированное и статическое.

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

Типы позиционирования элементов

Основное свойство CSS, которое позволяет управлять позиционированием элементов на странице это свойство position, оно сообщает браузеру, какой тип позиционирования используется для элемента (статический — static, относительный — relative, абсолютный – absolute, или фиксированный — fixed).

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

Абсолютное позиционирование

Совместно со свойством position используются CSS свойства, которые управляют смещением позиционированного элемента:

top (смещение позиционированного элемента от верхнего края).
right (смещение позиционированного элемента от правого края).
bottom (смещение позиционированного элемента от нижнего края).
left (смещение позиционированного элемента от левого края).

В качестве значений, которые определяют смещение элемента, допускается использовать физические единицы (например, пункты), но чаще используют визуальные единицы – пиксели, процентные значения и значения em. Значения могут быть как положительные, так и отрицательные, как и люди, только значения.

При использовании абсолютного позиционирования (position: absolute) элемент сдвигается (позиционируется) относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера.

Давайте начнем с простого примера, в котором мы будем позиционировать элементы (блоки) с абсолютным типом позиционирования.

<!DOCTYPE html>
<html>
<head>
<meta charset = «UTF-8»>
<title>Абсолютное позиционирование элементов</title>
<style>
div {
position: absolute; /* абсолютное позиционирование элементов */
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
}
.absolute {
top: 3em; /* смещение от вержнего края */
right: 50%; /* смещение от правого края */
background-color: green; /* цвет заднего фона */
}
.absolute2 {
bottom: 25%; /* смещение от нижнего края */
left: 40%; /* смещение от левого края */
background-color: yellow; /* цвет заднего фона */
</style>
</head>
<body>
<div class = «absolute»>
absolute
</div>
<div class = «absolute2»>
absolute2
</div>
</body>
</html>

И так, что мы сделали в этом примере:

Разместили два блока <div> шириной и высотой 100 пикселей и указали для них, что они имеют абсолютное позиционирование.
Для первого блока мы указали, что он смещается от верхнего края окна на 3em, а от правого на 50%.
Для второго блока мы указали, что он смещается от нижнего края окна на 25%, а от левого на 40%.
Теперь важный момент, на который вы, скорее всего не обратили внимание. Почему наши элементы позиционируются относительно окна браузера?
Элементы будут позиционироваться относительно заданного края предка лишь в том случае, если их предок имеет значение свойства position отличное от, установленного по умолчанию — static, иначе смещение будет вестись относительно края окна браузера. Подобные ситуации не раз будут возникать у Вас во время верстки страниц, запомните этот важный момент, мы еще к нему вернемся далее в этой статье учебника.

Результат нашего примера:

Рис. 157 Пример абсолютного позиционирования элементов на странице.

Обратите внимание, что наш второй блок (желтый) наложился на первый, в конце предыдущей статьи учебника «Работа с таблицами в CSS», мы уже сталкивались со свойством z-index, благодаря ему, вы можете управлять видимостью элементов по оси z. Например, если задать для первого (зеленого) блока значение z-index: 1, то уже он будет находиться выше по оси, чем второй (желтый блок) и будет полностью виден. Аналогичного эффекта можно добиться, если указать для желтого блока отрицательное значение свойства z-index.

Как вы заметили, элементы, которые имеют абсолютное позиционирование, отделяются от основного потока страницы, что может приводить к наслоению элементов друг на друга. Еще один нюанс работы с элементами, которые имеют абсолютное позиционирование, это то, что они не могут быть плавающими. Плавающими элементами могут быть только элементы, которые имеют статическое позиционирование (static), то есть то, которое установлено у элемента по умолчанию. Методы работы с плавающими элементами мы с Вами рассматривали в статье учебника «Плавающие элементы в CSS».

Относительное позиционирование

Следующий тип позиционирования, который мы рассмотрим это относительное позиционирование. Элементы, для которых задано относительное позиционирование (position: relative) смещаются (размещаются) относительно положения в потоке документа, или другими словами относительно его текущей позиции.

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

<!DOCTYPE html>
<html>
<head>
<meta charset = «UTF-8»>
<title>Относительное позиционирование элементов</title>
<style>
.static {
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */
}
.relative {
position: relative; /* относительное позиционирование элемента */
height: 100px; /* высота элемента */
top: 50px; /* смещение от вержнего края */
left: 100px; /* смещение от левого края */
background-color: green; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = «static»>
static
</div>
<div class = «relative»>
relative
</div>
<div class = «static»>
static
</div>
</body>
</html>

И так, что мы сделали в этом примере:

Для блоков (элементы <div>), которые имеют статическое позиционирование (по умолчанию) установили высоту 50 пикселей и цвет заднего фона – красный.
Разместили между блоков элемент с относительным позиционированием (position: relative), установили для него высоту 100 пикселей и цвет заднего фона зеленый. Кроме того указали, что он смещается относительно его текущей позиции от верхнего края на 50 пикселей, а с левого края на 100 пикселей, вызывая при этом переполнение документа.

Результат нашего примера:

Рис. 158 Пример относительного позиционирования элементов на странице.

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

На практике, Вам, скорее всего, не придется перемещать элементы, которые имеют относительное позиционирование. Основная идея относительного позиционирования заключается в том, чтобы не сдвинуть куда-то элемент, а создать «контейнер» для элемента, который имеет абсолютное позиционирование. Другими словами, вложенные элементы будут смещаться не относительно края окна браузера, а относительно этого элемента, который будет иметь относительное позиционирование и находится в основном потоке документа. Более подробно этот момент мы рассмотрим далее в этой статье учебника.

Фиксированное позиционирование

Третий тип позиционирования, который мы рассмотрим это фиксированное позиционирование. При фиксированном позиционировании элемент сдвигается относительно заданного края окна браузера. Отличительная особенность этого позиционирования заключается в том, что при прокрутке страницы элемент остается на одном месте, то есть, грубо говоря, он прокручивается вместе со страницей (элемент зафиксирован).

Я думаю, что путешествуя по сети интернет, вы не раз встречали меню навигации, боковые панели, или даже кнопки «вверх страницы», которые были зафиксированы на одном месте. Всё это становится возможным благодаря фиксированному позиционированию.

Давайте рассмотрим пример, в котором мы оформим фиксированную боковую панель.

<!DOCTYPE html>
<html>
<head>
<meta charset = «UTF-8»>
<title>Фиксированное позиционирование элементов</title>
<style>
html, body {
height: 100%; /* высота элемента */
margin: 0; /* внешний отступ со всех сторон */
}
.fixed {
position: fixed; /* фиксированное позиционирование элемента */
height: 100%; /* высота элемента */
width: 15%; /* ширина элемента */
background-color: red; /* цвет заднего фона */
right: 0; /* смещение от правого края */
}
.container {
height: 2000px; /* высота элемента */
}
</style>
</head>
<body>
<div class = «fixed»>
fixed
</div>
<div class = «container»>
</div>
</body>
</html>

Давайте разберем, что мы сделали в этом примере:

Установили для элементов <body> и <html> высоту равную 100%, это нам позволит задать высоту в процентах для нашей боковой панели. Кроме того, мы убрали внешние отступы (margin) для этих элементов, это необходимо, чтобы убрать встроенные стили браузера.
Для нашей боковой панели установили высоту равной родительскому элементу (100%), установили ширину 15% от родительского элемента и установили цвет заднего фона красный. Кроме того указали, что наша боковая панель имеет фиксированное позиционирование, что позволяет её как будто прилепить к экрану. Чтобы наша панель отображалась справа, мы установили значение right равным 0 (смещение позиционированного элемента от правого края окна браузера).
Для демонстрации фиксированного позиционирования мы создали контейнер высотой 2000 пикселей. Теперь если прокрутить страницу наша боковая панель останется на месте, а содержимое контейнера (основного содержимого) будет прокручиваться.

Результат нашего примера:

Рис. 159 Пример фиксированного позиционирования элементов на странице.

Статическое позиционирование

Ну и заключительный тип позиционирования это статическое позиционирование (static), мы с Вами уже неоднократно говорили о нем. Статическое позиционирование это классическое размещение элементов сверху вниз (элементы отображаются в порядке, как они указаны в потоке HTML документа), оно считается значением по умолчанию для всех элементов.

Хочу обратить Ваше внимание на один факт, что вышерассмотренные свойства, отвечающие за смещение элементов, не допускается применять к элементам, которые имеют статическое позиционирование, то есть имеют позиционирование, которое установлено по умолчанию.

Продвинутое абсолютное позиционирование

Перед тем как перейти к рассмотрению продвинутого применения абсолютного позиционирования, хочу обратить Ваше внимание, на то, что если вы не указываете значение вертикальной позиции элемента с абсолютным позиционированием (top , или bottom ), или наоборот горизонтальной позиции (left, или right), то браузер оставит элемент в том же месте на странице, где он находится в общем потоке (будет размещен поверх содержимого, если оно есть).

Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера. Настало время рассмотреть подобный пример:

<!DOCTYPE html>
<html>
<head>
<meta charset = «UTF-8»>
<title>Абсолютное позиционирование относительно предка</title>
<style>
.relative {
position: relative; /* относительное позиционирование элемента */
margin-top: 100px; /* внешний отступ от вержнего края */
width: 400px; /* ширина элемента */
height: 200px; /* высота элемента */
background-color: blue; /* цвет заднего фона */
}
.container {
height: 100px; /* высота элемента */
background-color: yellow; /* цвет заднего фона */
}
.absolute {
position: absolute; /* абсолютное позиционирование элемента */
top: 0; /* смещение от вержнего края */
right: 0; /* смещение от правого края */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = «relative»>
relative
<div class = «container»>
container
<div class = «absolute»>
absolute
</div>
</div>
</body>
</html>

Давайте внимательно разберем, что мы сделали в этом примере:

Для начала мы разместили блок (элемент <div>), который имеет относительное позиционирование. Указали для него внутренний отступ от верха (margin-top) равный 100 пикселей, задали ширину, высоту и цвет заднего фона.
Далее внутри него разместили блочный элемент (элемент <div>), который имеет высоту 100 пикселей и цвет заднего фона жёлтый. Как вы понимаете, этот элемент имеет статическое позиционирование (значение по умолчанию), так как значение свойства position не наследуется, и он не унаследовал от родительского блока относительное позиционирование.
Затем мы поместили внутри нашего контейнера со статическим позиционированием элемент, который имеет абсолютное позиционирование. Указали для него ширину и высоту равными 50 пикселей и цвет заднего фона красный. Обратите внимание на самый важный момент, что этот элемент позиционируется не относительно окна браузера, не относительно родительского элемента, а относительно своего предка, который имеет позиционирование, отличное от статического! В итоге наш элемент мы разместили в верхнем правом углу его предка с относительным позиционированием.

Результат нашего примера:

Рис. 160 Пример абсолютного позиционирования элемента относительно его предка.

Давайте подытожим изученную в этой статье учебника информацию о позиционировании элементов:

Статическое позиционирование это классическое размещение элементов сверху вниз (элементы отображаются в порядке, как они указаны в потоке HTML документа), оно считается значением по умолчанию для всех элементов.
Элемент позиционируется относительно окна браузера, если у него фиксированное позиционирование (элемент зафиксирован при прокрутке документа).
Элемент позиционируется относительно окна браузера, если у него абсолютное позиционирование, и он не вложен в элемент, который имеет позиционирование, отличное от статического.
Элемент, для которого задано относительное позиционирование смещается относительно положения в потоке документа (относительно его текущей позиции).
Элемент позиционируется относительно сторон другого элемента в том случае, если он имеет предка, или родителя с абсолютным, относительным или фиксированным позиционированием.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Какое css свойство позволяет управлять порядком наложения элементов

Используя полученные знания составьте следующий документ в котором:
1. Навигационная панель прокручивается вместе со страницей (фиксированная навигационная панель).
2. Кнопка «вверх» всегда находится в одном месте при прокрутке страницы.
3. Продвинутое задание: При наведении на оранжевый блок вы увидите затемненную область с текстом во всю ширину и высоту блока.
4. Продвинутое задание: Необходимо спозиционировать изображение относительно элементов списка.
Практическое задание № 32.
Подсказка: для последнего задания Вы можете использовать CSS псевдоэлемент ::before.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Источник

Техники наложения CSS

От автора: Есть несколько методов создания наложения: от использования абсолютно позиционированного элемента до контуров и псевдоэлементов. В этой статье мы собираемся исследовать стили каждой из методик со всеми их «за» и «против».

Дизайнерские шаблоны, набор лучших практик и методов, нацеленных на решение одной из самых распространенных «проблем» дизайна, обычно представлены в контексте дизайнерских принципов. Один из них – принцип «остаться на странице» (Stay On Page). Он базируется на том факте, что обновления страницы плохо действуют на мыслительные процессы пользователя, вызывая явление, известное как ослепление при смене, и нам нужно избегать визуальной перегрузки пользователя там, где и когда это возможно.

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

Поверхностные наложения можно применять для того, чтобы задать вопросы, представить свойства, обозначить прогресс, дать инструкции или показать информацию. Их можно активировать напрямую действиями пользователя (например, щелкнув на действие, проведя мышью над объектами) или представить веб-приложениями на различных стадиях при завершении действия. — Дизайн веб-интерфейсов

Когда пользовательский интерфейс воспринимается только в появляющемся модальном окне, обычно применяется эффект Lightbox, а остальная страница затемняется, обозначая ее неактивность. Задача этого учебника – представить вам несколько методов, которые можно применить для создания затемняющего наложения с помощью CSS, и обозначить «за» и «против» каждой техники по мере их описания.

Какое css свойство позволяет управлять порядком наложения элементов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

МЕТОД №1: АБСОЛЮТНО ПОЗИЦИОНИРОВАННЫЙ ЭЛЕМЕНТ

Первый способ создания наложения – абсолютное позиционирование на странице элемента HTML. В разметке будет пустой div, а с помощью CSS этот div абсолютно позиционируется и ему назначается болшое значение z-index для того, чтобы гарантировать, что он останется на странице поверх всех прочих элементов, кроме модального окна, открывающегося сверху этого наложения, которое получит еще более высокий z-index, чем оверлей.

<html>

<body>

<divclass=»overlay»></div>

<!—…—>

<body>

<html>

Предположим, в нашу разметку уже добавлен пустой div, и ему назначен класс .overlay, а вот CSS для позиционирования этого наложения на странице:

html, body{

min-height: 100%;

}

body{

position: relative;

}

.overlay{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 10;

background-color: rgba(0,0,0,0.5); /*затемнитефон*/

}

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

Во-первых, убедитесь, что оверлей абсолютно позиционирован по отношению к body. Так что, если наложение, например, содержится в другом div’е и позиционирование этого другого div’а установлено на относительное, то оверлей будет позиционирован абсолютно относительно его контейнера, а не body. Поэтому вам нужно либо дать наложению возможность быть прямым подчиненным узлом body, или убедиться, что ни у одного из его дочерних элементов позиционирование не установлено на relative.

Кроме того, вам следует убедиться, что содержимое страницы растягивается до самого низа окна просмотра или ниже, потому что body увеличивается таким образом, чтобы соответствовать высоте своего содержимого (естественно, предположим, что контент не расположен абсолютно), а если содержимого недостаточно для того, чтобы растянуть высоту body до низа окна просмотра, то наложение, достигающее 100% высоты тела, так же не достигнет низа окна просмотра и, следовательно, не закроет его.

Что бы этого избежать и не беспокоиться о количестве контента на странице, а оверлей при этом закрывал бы все окно просмотра, вы должны установить высоту корневого элемента html и body. Однако помните при установке высоты элементов html и body:

Если вы назначаете элементу html высоту в 100% (100% высоты относительно окна просмотра) и назначаете body так же высоту в 100% (что высчитывается относительно коренного html), то устанавливаете высоту этих обоих элементов на 100% высоты окна просмотра, и следовательно, неважно насколько далеко простирается содержимое body, его высота остается равной высоте окна просмотра, и такой же будет высота наложения. В этом случае при прокрутке страницы вниз наложение станет прокручиваться вверх и вы увидите содержимое под ним без оверлея, как будто он обрезан.

Решение этой проблемы – установка минимальной высоты корневого элемента и body вместо установки значения высоты, что в большинстве ситуаций предпочтительнее. Установив минимальную высоту, вы гарантируете, что он станет достигать низа окна просмотра и будет увеличиваться по мере увеличения содержимого. И наконец, чтобы величина оверлея увеличивалась и растягивалась для покрытия всего контента при прокрутке страницы вы должны установить position:relative; к body для того, чтобы высота наложения растягивалась вместе с увеличением высоты тела.

Еще об этой методике следует заметить, что не следует пользоваться слишком высокими значениями z-index. Многие разработчики любят брать очень большие значения, вроде z-index: 999999; при позиционировании оверлея или любого другого элемента поверх других элементов страницы. Это не требуется. Чаще всего значения z-index равного 10, иногда даже меньше, достаточно для того, чтобы элемент на странице оставался поверх остальных. Вам лишь следует знать, что если другие элементы получают z-index, и таковые имеются, то просто установите z-index наложения больше самого высокого у прочих элементов.

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

Преимущество этого способа в том, что он поддерживается во всех основных браузерах и даже старых, вплоть до IE8.

Я поместила пример на Codepen, чтобы вы могли протестировать результат этой техники. Попробуйтезаменить min-height в html и body на height, или удалить позиционирование relative из body и посмотреть, как при прокрутке оверлей обрезается внизу.

See the Pen Creating an Overlay with an Absolutely Positioned Element by Sara Soueidan (@SaraSoueidan) on CodePen

МЕТОД №2: ЭЛЕМЕНТ С POSITION FIXED

Второй способ добавления наложения очень похож на предыдущий, и в разметке используется тот же самый элемент .overlay, но вместо абсолютного позиционирования наложения вы назначаете ему фиксированное позиционирование и полную ширину и высоту для покрытия окна просмотра целиком. А так как в данном случае оверлей фиксирован, то в не зависимости от того, как далеко вниз вы прокручиваете, он будет оставаться на месте, покрывая всю область окна просмотра, а это именно то, что нам нужно.

.overlay {

position: fixed;

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 10;

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

}

В отличие от абсолютно позиционированных элементов, установленных относительно контейнера с помощью position:relative, фиксированные элементы позиционированы относительно окна просмотра:

Тогда как расположение и размеры элемента с position:absolute относительны к своему содержащему блоку, расположение и размеры элемента с position:fixed всегда относительны к исходному содержащему блоку. Обычно это окно просмотра: окно браузера или разворот страницы. — W3CWiki

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

See the Pen Creating an Overlay with an Element with Fixed Position by Sara Soueidan (@SaraSoueidan) on CodePen

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

МЕТОД №3: ПРИМЕНЕНИЕ ПСЕВДОЭЛЕМЕНТА

Во избежание добавления пустых элементов в разметку вместо них при создании наложения можно использовать псевдоэлементы. Стили и решения этого метода во многом похожи на предыдущие, за исключением того, что вместо стилей и расположения пустого элемента с классом .overlay мы назначим стили псевдоэлементам body :before или:after.

html, body {

min-height: 100%;

}

body {

position: relative; /* требуется, если вы позиционируете псевдоэлемент абсолютно */

}

body:after {

content: «»;

display: block;

position: fixed; /* тоже могла бы быть абсолютной */

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 10;

background-color: rgba(0,0,0,0.2);

}

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

See the Pen Creating an Overlay with a Pseudo-Element by Sara Soueidan (@SaraSoueidan) on CodePen

Здесь важно помнить о том, что переходы для псевдоэлементов все еще не работают в Safari и Mobile Safari, что является огромным недостатком, если вы собираетесь применить для создания наложения псевдоэлемент, потому что не сможете гарантировать своим пользователям полностью гладкие эффекты оверлея. Об этом важно помнить при создании веб-приложений, чтобы те на всех устройствах и смартфонах смотрелись как родные.

МЕТОД №4: ПРИМЕНЕНИЕ К МОДАЛЬНОМУ ОКНУ ШИРОКОГО КОНТУРА

Создание наложения с затемненным фоном этим способом не требует дополнительных элементов. Вместо них можно применить к модальному окну большой контур для получения эффекта затемнения на остальной странице.

Благодарить за эту технику следует Леа Веру (LeaVerou), она первой поделилась ею с нами через twitter. Итак, представьте, что у вас в разметке имеется элемент, представляющий модальное окно, которое появится в наложении:

Какое css свойство позволяет управлять порядком наложения элементов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<divclass=»modal»>I’m the Modal Window!</div>

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

.modal {

/* стили для позиционирования модального окна в центре страницы */

position: fixed;

top: 50%;

left: 50%;

width: 300px;

line-height: 200px;

height: 200px;

margin-left: -150px;

margin-top: -100px;

background-color: #f1c40f;

text-align: center;

/* нужные для оверлея стили */

z-index: 10; /* удерживайте поверх остальных элементов страницы */

outline: 9999px solid rgba(0,0,0,0.5);

}

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

See the Pen Creating an Overlay with an Outline by Sara Soueidan (@SaraSoueidan) on CodePen

Здесь нужно помнить о том, что при использовании этого метода темное наложение под модальным окном не устранит взаимодействие мыши с остальными элементами страницы. Вы не сможете предотвратить запуск событий указателя и мыши, если щелкнете на другой элемент страницы, что в большинстве случаев может оказать нежелательное действие. Так что придется обдумать, нужен ли такой эффект вашему приложению или нет, до того, как решите, применять ли вам этот метод.

Также обратите внимание, что контур нарисован вне border-a и не последует за скругленными углами. Если они у вас есть, как в примерах, то вы заметите зазор. Так что этот метод может оказаться не лучшим выбором, если у вас модальное окно с скругленными углами.

МЕТОД №5: ПРИМЕНЕНИЕ К МОДАЛЬНОМУ ОКНУ ШИРОКОЙ ТЕНИ БЛОКА

Единственное различие этой и предыдущей техники в том, что вместо большого контура мы применим к модальному окну широкую тень блока.

.modal {

/* стили для позиционирования модального окна в центре страницы */

position: absolute;

top: 50%;

left: 50%;

width: 300px;

line-height: 200px;

height: 200px;

margin-left: -150px;

margin-top: -100px;

background-color: #f1c40f;

text-align: center;

border-radius: 5px;

/* нужные стили для оверлея */

z-index: 10; /* удерживайте поверх остальных элементов страницы*/

box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);

}

Результат, конечно, тоже сильно похож.

See the Pen Creating an Overlay with a Large Box Shadow by Sara Soueidan (@SaraSoueidan) on CodePen

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

Теперь, не смотря на упоминание этой техники как одного из возможных способов создания наложений, я настоятельно рекомендую вам не пользоваться им. Более того, вообще не применяйте слишком много теней на своих страницах/приложениях.
Тени в сочетании с другими стилями вроде border-radius или в случае частого применения способны вызывать сильные помехи производительности, и даже сделать ваше приложение неприменимым в смартфонах и планшетах, так как они склонны становиться очень неадаптивными в приложениях, сильно переполненных box-shadow.

Тени блока не легко отображать, и все становится еще хуже, когда широкие тени применяются к фиксированным элементам, так как это может заставлять браузер перерисовывать большие области страницы при прокрутке. Особенно плохо выходит в Firefox’е, где фиксированные элементы и широкие тени блока CSS способны существенно снизить скорость, вплоть до 2 кадров в секунду при прокрутке и манипулировании DOM.

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

МЕТОД №6: ПРИМЕНЕНИЕ ЭЛЕМЕНТА HTML DIALOG

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

Теперь их можно легко создать и назначить им стили с помощью элемента HTML dialog. Элемент dialog обеспечивает внутреннюю функциональность. Диалог существует в дереве DOM, а назначить ему стили можно с помощью простого CSS. Элемент dialog представляет часть приложения, с которым пользователь взаимодействует для выполнения задачи, например, диалог, инспектор или окно. — спецификация HTML WHATWG

У элемента HTML dialog имеется четыре основных свойства, в трех из которых мы больше всего заинтересованы при создании оверлеев (четвертое на момент написания этой статьи еще не применяется):

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

Диалоги могут быть модальными. Когда модальный диалог открывается, он блокирует остальной документ. Для управления случаем применения множества модальных диалогов существует штабель «выполняемых диалогов».

Новый накладывающийся слой поверх существующих контекстов CSS выполняет поведение «всегда сверху». И dialog, и спецификация Fullscreen пользуются верхним слоем. Модальные диалоги постоянно находятся в верхнем слое. Поэтому вам не нужно тревожиться об установке z-index вручную для того, чтобы ваше модальное окно оставалось поверх всех элементов страницы.

Здорово, да? Элемент dialog центрируется поумолчанию, но, как говорилось в первом пункте, он применяет абсолютное позиционирование, поэтому его можно прокручивать. Можно обойти абсолютное позиционирование по умолчанию, установив position на fixed в таблице стилей. Если действительно решите изменить позицию на фиксированную, вам также придется установить значения top и left и тоже отцентрировать их. Элемент dialog можно поместить в DOM где угодно.

<dialog class=»modal»>This is the dialog!</dialog>

Ему можно назначить стили точно так же, как любому другому элементу блочного уровня.

.modal{

/* произвольные стили */

background-color: white;

border-radius: 5px;

box-shadow: 2px2px2pxrgba(0,0,0,0.2);

height:200px;

width:300px;