Значение свойства Z index в CSS

СSS свойство z-index (индекс z) определяет порядок расположения элементов по глубине на веб-странице. Оно позволяет контролировать, какой элемент будет находиться перед другими при перекрытии.

Значение z-index может быть положительным (большая глубина) или отрицательным (маленькая глубина). Элементы с более высоким z-index отображаются перед элементами с более низким z-index.

Пример использования z-index можно представить следующим образом:

<div class="container">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

.container {
  position: relative;
}

.element1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 1;
}

.element2 {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: blue;
  z-index: 2;
}

В этом примере создан контейнер с двумя элементами. При помощи свойства position, заданного для контейнера как relative, мы гарантируем, что элементы будут позиционироваться относительно этого контейнера.

При помощи свойства position: absolute задаем положение элементов element1 и element2 внутри контейнера. Это позволяет нам свободно перемещать их по горизонтали и вертикали относительно друг друга.

Ключевым моментом здесь является свойство z-index. В данном примере, элемент element2 имеет более высокий z-index (2), чем элемент element1 (1). Это означает, что element2 будет отображаться перед element1.

Если бы мы поменяли значения z-index элементов, то element1 был бы расположен перед element2. Значение z-index определяет, какой элемент будет "на переднем плане".

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

Однако, стоит заметить, что свойство z-index работает только на элементы с позиционированием (например, position: relative, position: absolute или position: fixed). Для не позиционированных элементов значение z-index не имеет эффекта.

Итак, в данном примере мы рассмотрели основы использования свойства z-index в CSS. Оно позволяет контролировать порядок элементов по глубине и задавать, какой элемент будет отображаться перед другими при перекрытии. Правильное использование z-index помогает создать сложные компоненты интерфейса, где элементы должны быть размещены в определенном порядке и последовательности.