W3docs
ru
Войти

CSS-свойство z-index

Используйте CSS-свойство z-index для управления порядком наложения элементов. Узнайте о значениях свойства и попробуйте примеры.

CSS-свойство z-index управляет порядком наложения перекрывающихся элементов — определяет, какой из них отображается спереди, а какой скрыт позади. Название происходит от воображаемой оси z: ось x идёт слева направо, ось y — сверху вниз, а ось z направлена из экрана к наблюдателю. Элемент с более высоким z-index располагается ближе к пользователю и перекрывает элементы с меньшим значением.

На этой странице рассматривается, что делает z-index, почему он работает только на позиционированных элементах, как контексты наложения определяют, какие значения вообще сравниваются между собой, а также наиболее частые причины, по которым z-index «не работает».

Как работает наложение

По умолчанию при перекрытии элементов тот, который расположен позже в HTML-источнике, отрисовывается поверх остальных. z-index позволяет явно переопределить этот порядок. Например, z-index: 10 будет находиться выше z-index: 1 вне зависимости от порядка в источнике, а отрицательные значения, такие как z-index: -1, помещают элемент позади его родителя.

Однако z-index — это не глобальный рейтинг. Значения сравниваются только в пределах одного контекста наложения. Контекст наложения — это самостоятельный слой: каждый элемент внутри него укладывается относительно своих соседей, а вся группа затем укладывается как единое целое внутри родительского контекста. Корневой элемент страницы (<html>) создаёт первый контекст наложения, а определённые свойства создают новые (см. ниже).

Информация

Свойство z-index не оказывает никакого эффекта на static-элементы (значение по умолчанию). Оно применяется только к позиционированным элементам — тем, у которых position установлено в relative, absolute, fixed или sticky — а также к элементам flex/grid.

Начальное значениеauto
Применяется кПозиционированным элементам.
НаследуетсяНет.
АнимируемоеДа.
ВерсияCSS2
DOM-синтаксисobject.style.zIndex = "-1";

Синтаксис

Синтаксис CSS-свойства z-index

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

Пример свойства z-index с отрицательным значением:

Пример CSS-свойства z-index с отрицательным значением

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>
Попробуйте сами »

Пример свойства z-index с положительным значением:

Пример CSS-свойства z-index с числовым значением

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>
Попробуйте сами »

Блоки перекрываются, потому что все они абсолютно позиционированы. Синий блок (z-index: 1) находится под зелёным блоком (z-index: 2), а у серого блока нет z-index, поэтому он подчиняется порядку в источнике. Обратите внимание, что чёрный блок (z-index: 10) вложен внутрь синего блока: его z-index: 10 сравнивается только с другими дочерними элементами синего блока, поэтому он не может подняться выше зелёного, даже несмотря на то что 10 > 2. Это и есть правило контекста наложения в действии.

Результат

CSS-свойство z-index

Значения

ЗначениеОписаниеПопробовать
autoУровень наложения создаваемого блока равен уровню родительского. Это значение по умолчанию.Попробовать »
numberУровень наложения создаваемого блока задаётся числом. Допустимы отрицательные значения.Попробовать »
initialУстанавливает для свойства его значение по умолчанию.Попробовать »
inheritНаследует свойство от родительского элемента.

Что создаёт новый контекст наложения

Понимание контекстов наложения — ключ к освоению z-index. Новый контекст создаётся, в частности, следующим:

  • Корневым элементом <html>.
  • Позиционированным элементом (relative, absolute, fixed, sticky) со значением z-index, отличным от auto.
  • Дочерним элементом flex- или grid-контейнера со значением z-index, отличным от auto.
  • Элементом со значением opacity меньше 1 (см. opacity).
  • Элементом со значением transform, filter, perspective, clip-path или mask, отличным от none (см. transform).
  • Элементом с position: fixed или position: sticky.
  • Элементом с isolation: isolate.
  • Элементом с will-change, установленным на свойство, которое создаёт контекст.

Как только элемент формирует контекст наложения, значения z-index его потомков «заперты» внутри него — они никогда не смогут вырваться наружу и конкурировать с элементами за пределами родителя.

Почему ваш z-index «не работает»

Вот типичные причины, расположенные в порядке частоты возникновения:

  1. Элемент является static. z-index молча игнорируется, если position не установлен в relative, absolute, fixed или sticky (или элемент не является flex/grid-элементом). Сначала задайте позиционирование.
  2. Родительский элемент формирует контекст наложения. Модальное окно с z-index: 9999 может оказаться скрытым за другим элементом, если его предок находится в контексте наложения с меньшим значением. Решение — поднять z-index предка, а не потомка.
  3. Предок имеет opacity или transform. Даже безобидный opacity: 0.99 или transform: translateZ(0) (часто добавляемый для «GPU-ускорения») создаёт контекст наложения и может заблокировать дочерние элементы.
  4. Вы боретесь с порядком в источнике. Без z-index побеждают элементы, расположенные позже. Иногда проще переупорядочить HTML, чем вести «гонку z-index».
Внимание

Избегайте больших «магических чисел» вроде z-index: 999999. Они делают порядок наложения невозможным для понимания. Используйте небольшую задокументированную шкалу (например 1, 10, 100, 1000 для контента, выпадающих меню, фиксированных панелей и модальных окон).

Пример: изоляция контекста наложения

Свойство isolation: isolate создаёт новый контекст наложения без изменения позиционирования или прозрачности. Это самый чистый способ ограничить значения z-index компонента:

.card {
  /* z-index values inside .card now stay inside .card */
  isolation: isolate;
}

Связанные свойства

  • position — необходимо для того, чтобы z-index имел эффект.
  • opacity — значения ниже 1 создают контекст наложения.
  • transform — значения, отличные от none, создают контекст наложения.

Практика

Практика
Что делает свойство 'z-index' в CSS?
Что делает свойство 'z-index' в CSS?
Was this page helpful?