Атрибут CSS z-index

  • предыдущая страница writing-mode
  • Следующая страница zoom

Определение и использование

Атрибут zIndex устанавливает порядок stacking (слоение) элементов. Элементы с более высоким порядком stacking (слоение) всегда находятся впереди элементов с более низким порядком.

Примечание:Элемент может иметь отрицательное значение атрибута z-index.

Примечание:Z-index действует только на элементах с позиционированием (например, position:absolute;)!

Описание

Этот атрибут устанавливает положение элемента по оси z, ось z определена как ось, вертикально простирающаяся до области отображения. Если это положительное число, то элемент ближе к пользователю, если отрицательное, то дальше.

См. также:

Урок CSS:CSS позиционирование

Руководство по HTML DOM:Атрибут zIndex

Пример

Установить z-index изображения:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Попробуйте сами

CSS синтаксис

z-index: auto|number|initial|inherit;

Значение атрибута

Значение Описание
auto По умолчанию. Порядок stacking (слоение) элементов равен родительскому.
number Устанавливает порядок stacking (слоение) элементов.
inherit Указывается, что значение атрибута z-index должно быть принято от родительского элемента.

Технические детали

Значение по умолчанию: auto
Инheritance: нет
Версия: CSS2
JavaScript синтаксис: object.style.zIndex="1"

Более примеров

Z-index
Z-index может быть использован для размещения одного элемента за другим.
Z-index
Элемент в предыдущем примере изменил значение Z-index.

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0
  • предыдущая страница writing-mode
  • Следующая страница zoom