z-index
Поддержка браузерами
| 12.0+ | 4.0+ | 3.0+ | 1.0+ | 4.0+ | 1.0+ |
Описание
В обычной структуре документа два элемента могут перекрывать друг друга, если они расположены с помощью CSS свойства position со значением absolute, relative или fixed. Таким образом они уже не зависят от общего потока в документе и могут располагаться на основе предоставленных координат.
Когда элемент позиционируется с помощью свойства position, то его местоположение устанавливается с помощью свойств top, left, right или bottom, которые задают координаты относительно экрана по осям X и Y.
CSS свойство z-index определяет порядок расположения позиционированных элементов по оси Z. Это позволяет контролировать наложение перекрывающихся элементов:
Примечание: элементы с более высоким индексом всегда находятся перед элементами с более низким индексом относительно оси Z.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | к позиционированным элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.zIndex="1" |
Синтаксис
z-index: auto|число|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Устанавливает значение индекса в значение родительского элемента. |
| число | Задает индекс элемента. Допускается использование отрицательных значений. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
position: absolute;
background-color: red;
z-index: auto;
}