CSS. Как работает z-index

21.08.2021

Теги: CSSHTMLWeb-разработкаВерсткаТеория

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

  1. Корневой элемент документа, то есть <html>
  2. Непозиционируемые элементы в том порядке, в котором они определены
  3. Позиционированные элементы в том порядке, в котором они определены

Непозиционируемый элемент — это элемент со значением position по умолчанию, то есть static. Позиционируемый элемент — это элемент с любым другим значением свойства position, то есть absolute, elative, sticky или fixed.

<div class="purple"></div>
<div class="blue"></div>
<div class="green"></div>
div {
    width: 200px;
    height: 200px;
}
.blue, .purple {
    position: absolute;
}
.purple {
    background-color: purple;
    top: 40px;
    left: 40px;
}
.blue {
    background-color: blue;
    top: 80px;
    left: 80px;
}
.green {
    background-color: green;
}

Мы определили зеленый квадрат в конце документа. Тем не менее, он появляется не впереди, а позади всех остальных элементов, потому что у него не задано позиционирование.

Позиционирование с применением z-index

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

div {
    width: 200px;
    height: 200px;
}
.blue, .purple {
    position: absolute;
}
.purple {
    background-color: purple;
    top: 40px;
    left: 40px;
    z-index: 2; /* добавляем z-index */
}
.blue {
    background-color: blue;
    top: 80px;
    left: 80px;
    z-index: 1; /* добавляем z-index */
}
.green {
    background-color: green;
    z-index: 100; /* добавляем z-index */
}

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

Контекст наложения (stacking order)

В примере выше для всех абсолютно позиционированных элементов конткстом наложения был корневой элемент <html>. Абсолютно позиционированные элементы выстаивались вдоль оси z соответственно их значениям z-index. Но элементы, у которых position не равен static, а z-index не равен auto, формируют свой контекст наложения. Значение z-index для дочернего элемента будет влиять только на расположение этого элемента относительно других дочерних элементов.

<div class="purple"> <!-- имеет свой контекст наложения -->
    <div class="orange"></div>
    <div class="red"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
div {
    width: 200px;
    height: 200px;
}
.blue, .purple, .orange, .red {
    position: absolute;
}
.purple {
    background-color: purple;
    top: 40px;
    left: 40px;
    z-index: 1; /* добавляем z-index */
}
    .purple .orange { /* дочерний элемент */
        background-color: orange;
        width: 100px;
        height: 100px;
        top: 20px;
        left: 20px;
        z-index: 20; /* добавляем z-index */
    }
    .purple .red { /* дочерний элемент */
        background-color: red;
        width: 100px;
        height: 100px;
        top: 40px;
        left: 40px;
        z-index: 10; /* добавляем z-index */
    }
.blue {
    background-color: blue;
    top: 100px;
    left: 100px;
    z-index: 2; /* добавляем z-index */
    opacity: 0.7;
}
.green {
    background-color: green;
    z-index: 100; /* добавляем z-index */
}

Элементы orange и red выстаиваются по оси z в контексте элемента purple. Хотя у элемента blue значение z-index равно двум, а у orange и red равен 20 и 10 — элемент blue расположен над ними (имеет прозрачность, чтобы были видны orange и red). Потому что он в контексте <html> имеет более высокий z-index, чем элемент purple.

Обратите внимание, что если не задавать z-index для purple и blue — они не будут формировать свой контекст. И для элементов orange и red контекстом наложения будет элемент <html>.

Контекст наложения формируется не только при использовании свойства z-index. Существует и другие свойства, которые заставляют элементы создавать контекст, например — filter, opacity, transform. Кроме того, контекст наложения формирует flex-элемент с z-index отличным от auto, чей родительский элемент имеет свойство display, равное flex или inline-flex.

Поиск: CSS • HTML • Web-разработка • Верстка • Теория

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.