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

Свойство 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; }

: