Встречайте верхний слой: решение проблемы z-index:10000

Jhey Tompkins

Верхний слой располагается над связанным с ним document в области просмотра браузера, и каждый document имеет один связанный верхний слой. Это означает, что элементам, переведенным на верхний уровень, не нужно беспокоиться о z-index или иерархии DOM. У них также есть аккуратный псевдоэлемент ::backdrop с которым можно поиграть. Спецификация полноэкранного API содержит более подробную информацию, поскольку полноэкранный режим был отличным примером верхнего уровня, который использовался до появления поддержки dialog .

Верхний слой помогает решить проблему рендеринга контента над остальной частью document .

Важные вещи, которые следует помнить: - Верхний уровень находится вне потока document . - z-index не влияет на верхний слой. — Каждый элемент верхнего слоя имеет стилизуемый псевдоэлемент ::backdrop . — Каждый элемент и ::backdrop генерируют новый контекст стекирования. - Элементы верхнего слоя располагаются в том порядке, в котором они появляются в наборе. Последний из них появляется сверху. Если вы хотите продвинуть элемент, удалите его и добавьте снова.

Как мы до сих пор имитировали верхний слой? Что ж, нередко можно увидеть, как разработчики опускают пустой элемент-контейнер в конец body . И тогда он будет использоваться как «искусственный» верхний слой. Идея состоит в том, что этот контейнер располагается над всем остальным в стеке. Если вы хотите продвигать что-то превыше всего остального, вы добавляете это в этот контейнер. Мы можем видеть это в таких популярных пакетах, как SweetAlert , responsejs-popup , Magnific Popup и других.

Благодаря новым встроенным компонентам и API, таким как <dialog> и «Popover» , вам не придется прибегать к этим обходным путям. Вы можете продвигать контент на верхний уровень.

Фреймворки пользовательского интерфейса позволяют нам размещать продвигаемые элементы вместе с их аналогами-компонентами. Но они часто разделяются в DOM, когда дело доходит до рендеринга.

При использовании верхнего уровня продвигаемые элементы находятся там, где вы помещаете их в исходный код (например, <dialog> ). Не имеет значения, на скольких уровнях в DOM находится элемент. Он будет повышен до верхнего уровня, и вы сможете проверить его там, где вы ожидаете, рядом с вашим компонентом HTML. Это упрощает одновременную проверку как триггерного, так и продвигаемого элемента в DOM. Особенно полезно, например, если ваш триггерный элемент обновляет атрибуты. Это также дает дополнительное преимущество в плане доступности теперь, когда элементы расположены рядом.

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

В этой демонстрации вы можете открыть всплывающее окно SweetAlert, а также открыть верхний слой <dialog> . Откройте <dialog> и попробуйте открыть всплывающее окно SweetAlert. Вы увидите, что он появляется под элементом верхнего слоя. А корень нашего всплывающего окна SweetAlert использует z-index 10000 с position: fixed .

.swal-overlay {
  z-index: 10000;
  position: fixed;
}

Вам не нужно применять какие-либо стили к <dialog> , чтобы он отображался поверх всего остального содержимого.

Инструменты разработчика

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

У Алины Варкки есть отличная статья , в которой подробно рассказывается об использовании этих инструментов. В настоящее время они доступны в качестве предварительной функции в Chrome Canary версии 105.

Вот и все!

Краткое введение в верхний слой. Давая возможность сказать «Пока!» на такие вещи, как:

.popup-container {
  z-index: 10000;
}

Что бы вы поместили в верхний слой? Вы пробовали dialog ? Или проверил API OpenUI Popover ? Дайте нам знать!

Jhey Tompkins

Верхний слой располагается над связанным с ним document в области просмотра браузера, и каждый document имеет один связанный верхний слой. Это означает, что элементам, перемещенным на верхний уровень, не нужно беспокоиться об z-index или иерархии DOM. У них также есть аккуратный псевдо-элемент ::backdrop с которым можно поиграть. Спецификация полноэкранного API содержит более подробную информацию, поскольку полноэкранный режим был отличным примером верхнего уровня, который использовался до появления поддержки dialog .

Верхний слой помогает решить проблему рендеринга контента над остальной частью document .

Важные вещи, которые следует помнить: - Верхний уровень находится вне потока document . - z-index не влияет на верхний слой. — Каждый элемент верхнего слоя имеет стилизуемый псевдоэлемент ::backdrop . — Каждый элемент и ::backdrop генерируют новый контекст стекирования. - Элементы верхнего слоя располагаются в том порядке, в котором они появляются в наборе. Последний из них появляется сверху. Если вы хотите продвинуть элемент, удалите его и добавьте снова.

Как мы до сих пор имитировали верхний слой? Что ж, нередко можно увидеть, как разработчики опускают пустой элемент-контейнер в конец body . И тогда он будет использоваться как «искусственный» верхний слой. Идея состоит в том, что этот контейнер располагается над всем остальным в стеке. Если вы хотите продвигать что-то превыше всего остального, вы добавляете это в этот контейнер. Мы можем видеть это в таких популярных пакетах, как SweetAlert , responsejs-popup , Magnific Popup и других.

Благодаря новым встроенным компонентам и API, таким как <dialog> и «Popover» , вам не придется прибегать к этим обходным путям. Вы можете продвигать контент на верхний уровень.

Фреймворки пользовательского интерфейса позволяют нам размещать продвигаемые элементы вместе с их аналогами-компонентами. Но они часто разделяются в DOM, когда дело доходит до рендеринга.

При использовании верхнего уровня продвигаемые элементы находятся там, где вы помещаете их в исходный код (например, <dialog> ). Не имеет значения, на скольких уровнях в DOM находится элемент. Он будет повышен до верхнего уровня, и вы сможете проверить его там, где вы ожидаете, рядом с вашим компонентом HTML. Это упрощает одновременную проверку как триггерного, так и продвигаемого элемента в DOM. Особенно полезно, например, если ваш триггерный элемент обновляет атрибуты. Это также дает дополнительное преимущество в плане доступности теперь, когда элементы расположены рядом.

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

В этой демонстрации вы можете открыть всплывающее окно SweetAlert, а также открыть верхний слой <dialog> . Откройте <dialog> и попробуйте открыть всплывающее окно SweetAlert. Вы увидите, что он появляется под элементом верхнего слоя. А корень нашего всплывающего окна SweetAlert использует z-index 10000 с position: fixed .

.swal-overlay {
  z-index: 10000;
  position: fixed;
}

Вам не нужно применять какие-либо стили к <dialog> , чтобы он отображался поверх всего остального содержимого.

Инструменты разработчика

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

У Алины Варкки есть отличная статья , в которой подробно рассказывается об использовании этих инструментов. В настоящее время они доступны в качестве предварительной функции в Chrome Canary версии 105.

Вот и все!

Краткое введение в верхний слой. Давая возможность сказать «Пока!» на такие вещи, как:

.popup-container {
  z-index: 10000;
}

Что бы вы поместили в верхний слой? Вы пробовали dialog ? Или проверил API OpenUI Popover ? Дайте нам знать!