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