Как работает контекст наложения элементов в современных веб-интерфейсах?

Контекст наложения в современных веб-интерфейсах работает благодаря свойству z-index в CSS. htmlacademy.ru Оно определяет порядок наложения элементов на веб-странице: какой элемент окажется сверху, а какой будет скрыт под ним. htmlacademy.ru

Некоторые особенности работы свойства z-index:

• Влияет только на элементы, у которых установлено свойство position со значением relative, absolute, fixed или sticky. htmlacademy.ru Если элемент по умолчанию статичен (position: static), z-index на него не повлияет. htmlacademy.ru
• Чем выше значение z-index, тем ближе к пользователю расположен элемент. htmlacademy.ru
• Авто (z-index: auto) — элемент следует естественному порядку наложения. htmlacademy.ru
• Число (z-index: 10) — устанавливает приоритет слоя. htmlacademy.ru
• Отрицательные значения (z-index: -1) — элемент уходит за другие. htmlacademy.ru

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

Внутри каждого контекста наложения существует свой порядок отрисовки элементов и их компонентов. doka-guide.vercel.app От самого нижнего слоя до самого верхнего: doka-guide.vercel.app

1. Фон (background) и рамки элемента (border). doka-guide.vercel.app
2. Позиционированные элементы (включая потомков), у которых значение свойства z-index меньше 0. doka-guide.vercel.app
3. Элементы без контекста наложения с display: block. doka-guide.vercel.app
4. Элементы со свойством float. doka-guide.vercel.app
5. Элементы с display: inline. doka-guide.vercel.app
6. Элементы (включая потомков) с z-index: auto или z-index: 0, а также элементы с opacity меньше 1. doka-guide.vercel.app
7. Элементы (включая потомков) с z-index больше 0. doka-guide.vercel.app

Согласно этому порядку, элемент с отрицательным значением z-index никогда не будет ниже фона или рамки родительского элемента. doka-guide.vercel.app