# Наложение элементов по оси 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; }`

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

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

←→
↑