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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии