z-index

Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.

Свойство z-index позволяет управлять порядком наложения элементов друг на друга.

Возьмём самую частую ситуацию, где пригождается z-index — наложение полупрозрачной вуали поверх блока с фоном и текстом.

У нас будет разметка для шапки сайта:

        
          
          <header>  <h1>Шапка сайта с классным заголовком</h1></header>
          <header>
  <h1>Шапка сайта с классным заголовком</h1>
</header>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для header мы зададим фоновое изображение и псевдоэлемент ::after с полупрозрачной вуалью, чтобы затемнить фон и чтобы текст лучше читался.

        
          
          header {  position: relative;  background: url("landscape.jpg") no-repeat center / cover;}header::after {  content: "";  position: absolute;  inset: 0;  /* Полупрозрачный фиолетовый */  background-color: rgb(125 20 204 / 0.5);}
          header {
  position: relative;
  background: url("landscape.jpg") no-repeat center / cover;
}

header::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Полупрозрачный фиолетовый */
  background-color: rgb(125 20 204 / 0.5);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если всё оставить как есть, то псевдоэлемент с вуалью будет перекрывать текст заголовка и затемнять его. По логике браузера абсолютный псевдоэлемент накладывается поверх блока <header> вместе со всем его содержимым. Представьте себе стопку листов, один поверх другого.

Нам такой эффект не нужен. Текст должен быть поверх вуали. Чем выше значение z-index, тем выше элемент в стопке наложения.

Добавим пару свойств. Отрицательный z-index опустит вуаль ниже текста:

        
          
          header {  z-index: 0;}header:after {  z-index: -1;}
          header {
  z-index: 0;
}

header:after {
  z-index: -1;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значением свойства z-index может быть отрицательное или положительное целое число. Значение по умолчанию — auto.

        
          
          .selector {  z-index: auto;  z-index: 0;  z-index: -1;  z-index: 1;  z-index: 9999999;  z-index: -999999;}
          .selector {
  z-index: auto;
  z-index: 0;
  z-index: -1;
  z-index: 1;
  z-index: 9999999;
  z-index: -999999;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z-index.

💡 z-index срабатывает для элементов с позиционированием (свойство position), отличающимся от статичного (значения relative, absolute, fixed, sticky).

💡 Исключение из правил: z-index работает с элементами, у которых значение свойства opacity меньше 1. Например, трюк с opacity: 0.999 почти не повлияет на внешний вид, но позволит использовать z-index без изменения позиционирования элемента.

💡 z-index также срабатывает у флекс- и грид-элементов и везде, где создаётся контекст наложения.

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

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Часто вижу такие записи z-index: 99999. Видимо, это нужно чтобы совершенно точно блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно.