В чем разница между:
все приведенные выше сценарии предназначены для div, который включает в себя два divs, div1 и div2, каждый из которых имеет индекс z, который равен 9 и 10. Соответственно,
Вложенный div находится в контексте стекирования html.
Не указывая z-index то же самое, что и z-index: auto; это его начальное значение.
auto и 0 означают то же самое, если ваш элемент не создает свой собственный контекст стекирования; например он не позиционируется как относительный, абсолютный или фиксированный.
Если ваше приложение div не установлено, то все, что вы установили его z-index, не имеет значения; он и все его содержимое будут участвовать в контексте стекирования html, и его потомки всегда будут располагаться перед ним.
Устанавливает порядок стека, равный его родителям. Это значение по умолчанию.
ничего не делает
Устанавливает порядок стека, равный его родителям, как и авто.
Указывает, что z-индекс должен быть унаследован от родительского элемента
Ссылка для дальнейшего чтения и тестирования:
z-index:0 всегда является "слоем по умолчанию" (слой, в котором находятся все элементы без явного z-index), и z-index:auto означает: "Устанавливает порядок стека, равный его родительскому элементу".
Поскольку все дочерние элементы родителя по умолчанию начинаются с "z-layer 0" - относительно их родительского, то in-effects, z-index:auto и z-index:0 означает одно и то же: они оба будут находиться в одном и том же слое, и их порядок укладки будет соответствовать правилам стекирования по умолчанию, которые вы можете увидеть здесь .
n CSS, вы можете позиционировать 2 или более объектов для перекрытия друг друга. Их z-индексы определяют, какие объекты находятся "перед" или "позади" других объектов, которые они перекрывают. Чем выше объект z-index, тем выше "объект в стеке" объектов будет отображаться