Свойство z-index - наложение элементов по оси Z
Свойство 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;
}: