Позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы. Свойство z-index и определяет порядок позиционированных элементов по z-оси (в стеке). Чем больше этот индекс у элемента, тем выше в стеке он находится.
Внимание: Свойство z-index работает только с позиционированными элементами, т.е. у которых установлено position:absolute, position:relative или position:fixed.
CSS синтаксис
z-index: auto | число | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Устанавливает тот же порядок в стеке, что и у родительского элемента. |
| число | Устанавливает конкретный порядок в стеке. Допустимо использование отрицательных значений. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем порядок в стеке для изображения
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
