Свойство CSS z-index
Пример
Установите z-индекс для изображения:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Определение и использование
Свойство z-index
указывает порядок элемента в стеке.
Элемент с большим порядком стека всегда находится перед элементом с меньшим порядком стека.
Примечание: z-index
работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная, позиция: фиксированная или позиция: липкая) и flex-элементами (элементами, которые являются прямыми
дочерними элементами display:flex ).
Примечание. Если два позиционированных элемента перекрываются без z-index
указания, элемент, позиционированный последним в коде HTML, будет отображаться сверху.
Значение по умолчанию: | авто |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.zIndex="-1" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Синтаксис CSS
z-index: auto|number|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Связанные страницы
Учебное пособие по CSS: CSS-позиционирование
Справочник по HTML DOM:
свойство zIndex