22.08.2022, Новость в блоге Хрома, Статья на MDN
Недавно выходила статья о том, как можно сделать z-index, который (почти) никак не перебить – Never lose a z-index battle again. Идея заключается в том, что в calc() можно передать infinity (и не только его), умноженный на 1px, и выражение calc(infinity * 1px) просто превратится в максимальное Int32 значение.
Рецепт
Если когда-нибудь надо было сделать форму элемента в виде таблетки (радиус скругления равен половине минимума ширина или высоты), то это очень легко сделать с помощью
calc(infinity * 1px).
В противовес такому решению для z-index’а существует Top Layer – специальный виртуальный слой, который всегда выше всей страницы и не обращает внимание на z-index. Но у этого слоя есть ограничения – в него попадают только фулскрин-элементы, dialog’и и popover’ы. Никак программно доступ к нему получить нельзя.
Почему Top Layer важен? Если мы можем позволить себе создание тултипов и попапов на Popover API – то будут очень крутые нативные тултипы, игнорирующие большинство проблем с позиционированием и наслоением z-index’ов. Ну а для модалок подошёл бы dialog, который также себя хорошо чувствовал. Но тогда и все компоненты с попапами (напр. Select’ы), тоже стоило бы перевести на Popover API.
Надеемся, что в будущем сможем работать с Top Layer не только через диалоги и поповеры.