Исполняемые доки CSS: z-index в CSS

Q: Почему не работает z-index?

Либо элемент не позиционирован (z-index нужен position, отличный от static, или элемент должен быть flex- или grid-потомком), либо он находится внутри родителя, который образует контекст наложения с более низким порядком. Дочерний элемент никогда не поднимется над элементом, ниже которого стоит его контекст наложения, каким бы ни был его собственный z-index.

Q: Работает ли z-index без position?

У обычных блочных и строчных элементов нет: position: static его игнорирует. У flex- и grid-элементов он работает без всякого position.

Что делает z-index

Когда элементы перекрываются, z-index решает, какой из них рисуется спереди. Побеждает большее число. Он действует на позиционированные элементы (любой position, кроме static) и на flex- и grid-элементы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .stage { position: relative; height: 170px; }
    .card {
      position: absolute;
      width: 130px; height: 100px; padding: 8px;
      color: white; font-weight: 600; border-radius: 8px;
    }
    .a { background: #2563eb; top: 0; left: 0; z-index: 3; }
    .b { background: #16a34a; top: 30px; left: 60px; z-index: 1; }
    .c { background: #f59e0b; top: 60px; left: 120px; z-index: 2; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="card a" id="a">A z-index: 3</div>
    <div class="card b" id="b">B z-index: 1</div>
    <div class="card c" id="c">C z-index: 2</div>
  </div>
</body>
</html>

Без z-index более поздние элементы в HTML рисуются поверх более ранних, поэтому C закрыл бы B, а B закрыл бы A. Значения z-index меняют это: A спереди, затем C, затем B.

Значения

Значение	Смысл
`auto` (по умолчанию)	На уровне 0 вместе с соседями, контекст наложения не создает
`0`	Уровень 0, но создает контекст наложения
Положительное целое	Перед меньшими значениями
Отрицательное целое	За уровнем 0 и за содержимым родителя, если родитель образует контекст наложения

Допустимы только целые числа: z-index: 1.5 игнорируется.

Почему z-index 9999 может проиграть: контексты наложения

Значения z-index не сравниваются по всей странице. Элементы группируются в контексты наложения, и z-index упорядочивает только элементы внутри одного контекста. Сам контекст затем размещается как один слой по z-index элемента, который его создал.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacking context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .header {
      position: relative;
      z-index: 1;                 /* creates a stacking context */
      height: 40px; padding: 10px; background: #e5e7eb;
    }
    .dropdown {
      position: absolute;
      top: 40px; left: 20px;
      z-index: 9999;              /* only counts inside .header */
      width: 180px; height: 110px; padding: 8px;
      background: #2563eb; color: white;
    }
    .banner {
      position: relative;
      z-index: 2;
      margin-top: 20px; height: 60px; padding: 10px;
      background: #16a34a; color: white;
    }
    .no-context .header { z-index: auto; }
  </style>
</head>
<body>
  <div id="page">
    <div class="header">Header, z-index: 1
      <div class="dropdown" id="dropdown">Dropdown, z-index: 9999</div>
    </div>
    <div class="banner" id="banner">Banner, z-index: 2</div>
  </div>
  <p><button type="button" id="fix">Set the header's z-index to auto</button> <span id="out"></span></p>
  <script>
    const report = () => {
      const r = document.getElementById('banner').getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 60, r.top + 20);
      document.getElementById('out').textContent = 'On top at the overlap: ' + top.id;
    };
    document.getElementById('fix').addEventListener('click', () => {
      document.getElementById('page').classList.toggle('no-context');
      report();
    });
    report();
  </script>
</body>
</html>

Нажмите кнопку. С z-index: auto шапка больше не образует контекст наложения, поэтому 9999 меню сравнивается с 2 баннера напрямую, и меню выходит вперед. Поднять меню до 99999 не помогло бы никогда.

Что создает контекст наложения

Любое из этого превращает элемент в собственный контекст наложения и запирает z-index всего, что внутри:

Свойство	Условие
`position: relative` или `absolute`	С `z-index`, отличным от `auto`
`position: fixed` или `sticky`	Всегда
Flex- или grid-элемент	С `z-index`, отличным от `auto`
`opacity`	Меньше 1
`transform`, `scale`, `rotate`, `translate`	Любое значение, кроме `none`
`filter`, `backdrop-filter`	Любое значение, кроме `none`
`isolation`	`isolate`
`mix-blend-mode`	Любое значение, кроме `normal`
`will-change`	С указанием любого из свойств выше
`contain`	`layout` или `paint` (а также `strict`, `content`)

Неожиданнее всего opacity и transform: если добавить родителю затухание или анимацию при наведении, его выпадающее меню вдруг может оказаться под следующей секцией.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>opacity creates a context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 0; }
    .col { position: relative; width: 160px; height: 120px; padding: 8px; background: #e5e7eb; }
    .col + .col { background: #fde68a; }
    .tip {
      position: absolute; top: 40px; left: 100px; z-index: 10;
      width: 120px; padding: 8px; background: #2563eb; color: white;
    }
    .faded { opacity: 0.99; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col faded" id="first">opacity: 0.99
      <div class="tip" id="tip">Tooltip z-index: 10</div>
    </div>
    <div class="col" id="second">Next column</div>
  </div>
  <p id="out"></p>
  <script>
    const r = document.getElementById('second').getBoundingClientRect();
    document.getElementById('out').textContent =
      'On top in the overlap: ' + document.elementFromPoint(r.left + 30, r.top + 60).id;
  </script>
</body>
</html>

z-index: 10 у подсказки должен ставить ее над следующей колонкой. Но opacity: 0.99 делает первую колонку контекстом наложения с z-index auto (уровень 0), а вторая колонка идет в HTML позже на том же уровне, поэтому она рисуется поверх всей первой колонки вместе с подсказкой. Удалите строку с opacity, и подсказка снова впереди.

Отрицательный z-index

Отрицательный z-index ставит элемент за его соседей. Если родитель не образует контекст наложения, элемент может уйти даже за фон родителя, и это частый сюрприз. isolation: isolate у родителя создает контекст без других визуальных эффектов и удерживает отрицательный дочерний элемент внутри:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .button {
      position: relative;
      padding: 14px 20px; background: #e5e7eb; font-weight: 600;
    }
    .button::before {
      content: "";
      position: absolute; inset: -6px;
      background: #f59e0b;
      z-index: -1;               /* behind the button's text */
    }
    .isolated { isolation: isolate; }
  </style>
</head>
<body>
  <div class="button">No isolation</div>
  <div class="button isolated">isolation: isolate</div>
</body>
</html>

Без isolation янтарная рамка уходит за собственный серый фон кнопки, и виден только ее край. С isolation: isolate рамка остается внутри контекста наложения кнопки: над ее фоном, под ее текстом.

Шкала z-index

Выберите для всего сайта несколько именованных слоев вместо гонки чисел:

:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}
.modal { position: fixed; z-index: var(--z-modal); }

Большинство ошибок наложения это ошибки контекстов, а не чисел, поэтому небольшая шкала плюс isolation: isolate у компонентов, которые используют z-index внутри себя, решает многое. z-index нужно позиционирование; оно разобрано на странице про position.

Частые ошибки

z-index у статичного элемента. Добавьте position: relative (или сделайте его flex- или grid-элементом).
Гонка до 9999. Если родитель образует контекст ниже конкурента, никакое значение у дочернего элемента не победит. Найдите этот контекст.
Новые opacity, transform или filter у родителя, которые вдруг запирают его выпадающее меню.
Дробные значения. z-index: 1.5 невалидно.
Ожидание, что z-index: 0 и auto ведут себя одинаково. 0 создает контекст наложения, auto нет.
Модальные окна внутри глубоко вложенных компонентов. Отрисовывайте их ближе к концу <body> (или используйте верхний слой элемента <dialog>), чтобы их не запер контекст ни одного предка.

Часто задаваемые вопросы

Что делает z-index?

Задает порядок наложения перекрывающихся элементов: большее значение рисуется перед меньшим в пределах одного контекста наложения. По умолчанию auto, а значения это целые числа, в том числе отрицательные.

Почему не работает z-index?

Либо элемент не позиционирован (z-index нужен position, отличный от static, или элемент должен быть flex- или grid-потомком), либо он находится внутри родителя, который образует контекст наложения с более низким порядком. Дочерний элемент никогда не поднимется над элементом, ниже которого стоит его контекст наложения, каким бы ни был его собственный z-index.

Что такое контекст наложения?

Группа элементов, которые накладываются вместе как один слой. Внутри нее дочерние элементы упорядочены по своему z-index; снаружи всю группу размещает z-index элемента, который ее создал.

Что создает контекст наложения?

Среди прочего: корневой элемент, позиционированный элемент с z-index, отличным от auto, position: fixed или sticky, flex- или grid-потомок с z-index, opacity меньше 1, transform, filter, isolation: isolate и will-change для этих свойств.

Работает ли z-index без position?

У обычных блочных и строчных элементов нет: position: static его игнорирует. У flex- и grid-элементов он работает без всякого position.

Связанные концепции