3.0 KiB
title | localeTitle |
---|---|
Z Index | Индекс Z |
Индекс Z
Z Index ( z-index
) - это свойство CSS, которое определяет порядок перекрывающихся элементов HTML. Элементы с более высоким индексом будут помещены поверх элементов с более низким индексом.
Примечание : индекс Z работает только с расположенными элементами ( position:absolute
, position:relative
или position:fixed
).
Возможные значения
/* Default value if not specified */
z-index: auto;
/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
Пример использования
В этом примере вы можете видеть три окна, отображаемые друг на друга в разных порядках, используя z-index
.
HTML
<div class="container">
<div class="box" id="blue"></div>
<div class="box" id="red"></div>
<div class="box" id="green"></div>
</div>
CSS
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
Поскольку z-index
не определен, он будет иметь значение по умолчанию для auto
. Это результат:
Попробуйте изменить порядок на зеленый, синий, красный в CSS с помощью z-index
.
#blue {
background-color: blue;
z-index: 2;
}
#red {
background-color: red;
z-index: 1;
}
#green {
background-color: green;
z-index: 3;
}
Ваш результат будет:
Используйте Z-индекс, если вам нужно поместить элемент фона под контейнером. Вы можете легко разместить фон под каждым элементом, указав на него отрицательный индекс Z, как показано ниже:
#background {
z-index: -1;
}
Дополнительная информация:
https://css-tricks.com/almanac/properties/z/z-index/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS Позиционирование / понимание z_index
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/