Z-индекс - это свойство, которое определяет, какой элемент HTML появляется поверх другого элемента HTML, когда они перекрываются. Основная идея состоит в том, что элемент с самым высоким z-индексом находится «сверху».
По умолчанию у элементов z-индекс равен нулю, но если установить для свойства css одного элемента значение 1, а для другого - 5, то последний элемент будет «поверх» первого, если они перекрываются.
Пока все просто, но есть несколько вещей, на которые стоит обратить внимание.
Один, как уже упоминалось в другом ответе, состоит в том, что z-индекс имеет эффект только в том случае, если элемент позиционируется с абсолютной, фиксированной или относительной позицией. (то есть свойство css "position"). Непозиционированный элемент имеет z-индекс, равный нулю.
Чтобы усложнить ситуацию дальше (и, по моему опыту, область, которая часто не понимается), является концепцией стекового контекста. Более подробную информацию можно найти в таких статьях, как this . Короче говоря, каждый раз, когда вы явно устанавливаете новый z-индекс, вы запускаете новый контекст стека. Все дочерние элементы того элемента, для которого был задан z-индекс, теперь находятся в этом новом контексте стекирования, который может находиться выше или ниже контекста стекирования другого несвязанного элемента.
Что означает этот стековый контекст? Это означает, что элемент с z-индексом 100 не обязательно находится поверх элемента с z-индексом 1. Если они находятся в разных контекстах стека, имеют значение только z-индексы самих стековых контекстов.