Как работает контекст наложения в современных браузерах?

Алиса

На основе источников, возможны неточности

Как это работает?

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

Некоторые особенности работы контекста наложения:

Браузер при отрисовке страницы идёт сверху вниз по HTML-разметке и рисует блоки один за другим в том же порядке, в котором они расположены. doka.guide Однако он располагает элементы не только по осям x и y, но ещё и по оси z (глубине). doka.guide

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

Контексты наложения формируются иерархически. purpleschool.ru Каждый новый контекст наложения создаёт отдельную «стековую» группу для своих дочерних элементов. purpleschool.ru

Свойство z-index определяет порядок рисования элементов в пределах одного контекста наложения. purpleschool.ru Элементы с более высоким значением z-index будут нарисованы поверх элементов с более низким значением z-index. purpleschool.ru

Некоторые свойства автоматически создают новый контекст наложения, например, opacity меньше 1 или трансформация (transform). purpleschool.ru

Самый базовый контекст наложения, существующий на любой странице, формируется корневым элементом <html>. doka.guide Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга. doka.guide

developer.mozilla.org

Найти в Поиске

Примеры полезных ответов Поиска с Алисой на вопросы из разных сфер. Вопросы сгенерированы нейросетью YandexGPT для актуальных тем, которые определяются на базе обобщённых запросов к Поиску с Алисой.

Пожаловаться на контент

Пользовательское соглашение

Связаться с нами

Задать новый вопрос

Как это работает?