Как работает свойство z-index в контексте наложения?

Свойство z-index в CSS отвечает за порядок наложения элементов на веб-странице. htmlacademy.ru Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. htmlacademy.ru Чем выше значение z-index, тем ближе к пользователю расположен элемент. htmlacademy.ru

Z-index влияет только на элементы, у которых установлено свойство position со значением relative, absolute, fixed или sticky. htmlacademy.ru Если элемент по умолчанию статичен (position: static), z-index на него не повлияет. htmlacademy.ru

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

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