Введение
Свойство z-index определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим.
Для позиционируемого контейнера свойство z-index
определяет:
- порядок наложения в текущем контексте наложения;
- создаёт ли контейнер локальный контекст наложения.
Начальное значение | auto |
---|---|
Применяется к | позиционированные элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | целое число |
Создаёт контекст наложения | да |
Синтаксис
/* Значение - ключевое слово */
z-index: auto;
/* <целочисленные> значения */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Отрицательные значения понижают приоритет */
/* Глобальные значения */
z-index: inherit;
z-index: initial;
z-index: unset;
Значения
auto
- Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.
<integer>
- Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен
0
. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.
Формальный синтаксис
Примеры
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
Результат
Спецфикации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Transitions Определение 'animation behavior for z-index' в этой спецификации. |
Рабочий черновик | Определяет свойство z-index как анимируемое. |
CSS Level 2 (Revision 1) Определение 'z-index' в этой спецификации. |
Рекомендация | Первоначальное определение |
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Основная поддержка | 1.0 | 1.0 (1.7 или ранее) | 4.0 | 4.0 | 1.0 |
Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) | 1.0 | 3.0 (1.9) | 4.0 | 4.0 | 1.0 |
Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Основная поддержка | ? | ? | ? | ? | ? |
Отрицательные значения (поведение для CSS2.1, не разрешается в устаревшей спецификации CSS2) | ? | ? | ? | ? | ? |
Смотрите также
- Свойство CSS
position
- Понимание z-индексов CSS