Главная > Блог > Web-разработка > HTML и CSS >

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

21.08.2021

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

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

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

Непозиционируемый элемент — это элемент со значением position по умолчанию, то есть static. Позиционируемый элемент — это элемент с любым другим значением свойства position, то есть absolute, relative, 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-разработка • Frontend • Верстка • Теория