Z-индекс

Z-индекс — это CSS-свойство, которое определяет порядок наложения элементов друг на друга. Чем выше значение z-index, тем ближе элемент к пользователю.

Основные понятия

  • z-index: auto; — по умолчанию используется порядок элементов в исходном коде.
  • z-index: 1; и выше — элемент будет накладываться на элементы с меньшим z-index.
  • z-index: -1; — элемент будет находиться позади других элементов.

Требования

Чтобы z-index работал, элемент должен иметь заданное свойство position, например:

  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;

Пример

div.box1 {
  position: relative;
  z-index: 1;
  background: lightblue;
  width: 100px;
  height: 100px;
}

div.box2 {
  position: relative;
  z-index: 2;
  background: coral;
  width: 100px;
  height: 100px;
  margin-top: -50px;
}

В этом примере box2 будет находиться над box1, так как z-index: 2.

Резюме

  • Z-индекс управляет порядком наложения элементов.
  • Элементы с большим z-index накладываются на элементы с меньшим значением.
  • Необходимо учитывать position, чтобы z-index работал.