тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Наложение элементов по оси Z

В данном уроке мы с вами рассмотрим наложение элементов по оси Z. По умолчанию, если два элемента накладываются друг на друга, то выше будет тот элемент, который идет ниже в HTML коде.

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

<div id="elem1"></div> <div id="elem2"></div> #elem1 { position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: #ff8888; } #elem2 { position: absolute; top: 60px; left: 60px; width: 100px; height: 100px; background: #7e89eb; }

:

Регулируем наложение

Порядок наложения элементов можно регулировать с помощью свойства z-index, принимающего своим значением целые положительные или отрицательные числа, либо ноль. Свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

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

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

#elem1 { z-index: 2; } #elem2 { z-index: 1; }

Результат выполнения кода:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Нюансы

Если z-index у элемента не задан, то его значение следует трактовать как 0. Это значит, что элемент со значением z-index, равным -1, будет ниже элемента без z-index.

Можно переделать пример с нашими двумя элементами следующим образом: просто задать второму элементу z-index в значение -1, и он станет под первый элемент:

#elem1 { /* не задаем z-index */ } #elem2 { z-index: -1; }

Результат выполнения кода:

Повторите страницу по данному образцу: