Свойство z-index
Определяет порядок элементов по оси Z. Работает только если элементу задано свойство position, за исключением значения static.
z-index: 1;Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
z-index: auto;
Позиция элемента будет зависеть от позиции элемента в HTML коде. Первый элемент в коде будет находиться ниже, чем второй.
<style>
.example-1 {
position: relative;
height: 140px;
}
.example-1-item {
width: 100px;
height: 100px;
position: absolute;
}
.example-1-item.bg-green {
left: 20px;
top: 20px;
}
.example-1-item.bg-black {
left: 40px;
top: 40px;
}
</style>
<div class="example-1">
<div class="example-1-item bg-red"></div>
<div class="example-1-item bg-green"></div>
<div class="example-1-item bg-black"></div>
</div>z-index: 1;
Любое целое положительное число. Чем число больше, тем элемент будет выше других элементов по оси Z. Если z-index элементов совпадает, то их позиция будет зависеть от порядка в HTML коде.
<style>
.example-2 {
position: relative;
height: 140px;
}
.example-2-item {
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}
.example-2-item.bg-green {
left: 20px;
top: 20px;
z-index: 3;
}
.example-2-item.bg-black {
left: 40px;
top: 40px;
z-index: 2;
}
</style>
<div class="example-2">
<div class="example-2-item bg-red"></div>
<div class="example-2-item bg-green"></div>
<div class="example-2-item bg-black"></div>
</div>z-index: -1;
Отрицательное целое число понижает приоритет положения элемента. Данный элемент будет расположен ниже всех элементов страницы
<style>
.example-3 {
position: relative;
height: 140px;
}
.example-3-item {
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}
.example-3-item.bg-green {
left: 20px;
top: 20px;
z-index: 2;
}
.example-3-item.bg-black {
left: 40px;
top: 40px;
z-index: -1;
}
</style>
<div class="example-3">
<div class="example-3-item bg-red"></div>
<div class="example-3-item bg-green"></div>
<div class="example-3-item bg-black"></div>
</div>