Как работает свойство z-index в CSS?

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

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

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

Если свойства z-index и position явно не заданы для элементов, контекст наложения определяется порядком их размещения в исходном коде. purpleschool.ru