# Свойство z-index

Свойство `z-index` устанавливает, кто будет сверху в случае, если несколько элементов накладываются друг на друга.

## Синтаксис

`селектор { z-index: число | auto; }`

Число должно быть целым, положительным или отрицательным. Может быть нулем.

## Значения

Значение | Описание
--- | ---
Число | Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого `z-index` больше.
`auto` | Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в HTML коде.

Значение по умолчанию: `auto`.

## Пример

В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде (`z-index` не задан и будет иметь значение по умолчанию - `auto`). Первый блок будет в самом низу (красный), а последний - выше всех (зеленый):

`<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>` `#div1 { position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; } #div2 { position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; } #div3 { position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; }`

:

## Пример

Поменяем порядок наложения, задав `z-index`. Красному блоку - `3`, голубому - `2`, зеленому - `1`. Порядок наложения поменяется на обратный (выше всех будет блок с `z-index` `3`):

`<div id="div1"></div> <div id="div2"></div> <div id="div3"></div>` `#div1 { position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; z-index: 3; } #div2 { position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; z-index: 2; } #div3 { position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; z-index: 1; }`

:

← →
↑
en ru