Справочник HTML & CSS

z-index

Какой из позиционированных элементов рисуется сверху, когда они перекрываются.

Синтаксис

z-index: number;

Значения

Параметр	Тип	Описание
number	integer	Больший номер рисуется над меньшим; может быть отрицательным.
auto	keyword	Порядок элементов в разметке (по умолчанию).

Примеры

Первый блок сверху, хотя второй идёт позже:

<style>
  .box { position: relative; width: 120px; height: 70px; padding: 6px; color: white; }
  .a { background: royalblue; z-index: 2; }
  .b { background: crimson; margin: -40px 0 0 40px; z-index: 1; }
</style>
 
<div class="box a">z-index: 2 — on top</div>
<div class="box b">z-index: 1</div>

Примечания

z-index работает у позиционированных элементов и у элементов flex и grid. Элементы сравниваются только внутри одного контекста наложения: ребёнок с z-index: 9999 не поднимется над соседом родителя, если сам родитель ниже. Контекст создают также opacity меньше 1, transform и filter.

См. также

position — Как позиционируется элемент: в обычном потоке или по смещениям.
opacity — Прозрачность всего элемента вместе с содержимым.

Вопросы и ответы по теме

В учебнике

Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.

Спасибо, что читаете!