101 lines
3.0 KiB
Markdown
101 lines
3.0 KiB
Markdown
|
---
|
|||
|
|
title: Z Index
|
|||
|
|
localeTitle: Индекс Z
|
|||
|
|
---
|
|||
|
|
## Индекс Z
|
|||
|
|
|
|||
|
|
Z Index ( `z-index` ) - это свойство CSS, которое определяет порядок перекрывающихся элементов HTML. Элементы с более высоким индексом будут помещены поверх элементов с более низким индексом.
|
|||
|
|
|
|||
|
|
**Примечание** : индекс Z работает только с расположенными элементами ( `position:absolute` , `position:relative` или `position:fixed` ).
|
|||
|
|
|
|||
|
|
#### Возможные значения
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* Default value if not specified */
|
|||
|
|
z-index: auto;
|
|||
|
|
|
|||
|
|
/* Integer values */
|
|||
|
|
z-index: 1;
|
|||
|
|
z-index: 100;
|
|||
|
|
z-index: 9999;
|
|||
|
|
z-index: -1;
|
|||
|
|
|
|||
|
|
/* Global values */
|
|||
|
|
z-index: inherit;
|
|||
|
|
z-index: initial;
|
|||
|
|
z-index: unset;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Пример использования
|
|||
|
|
|
|||
|
|
В этом примере вы можете видеть три окна, отображаемые друг на друга в разных порядках, используя `z-index` .
|
|||
|
|
|
|||
|
|
_HTML_
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="box" id="blue"></div>
|
|||
|
|
<div class="box" id="red"></div>
|
|||
|
|
<div class="box" id="green"></div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_CSS_
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#blue {
|
|||
|
|
background-color: blue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#red {
|
|||
|
|
background-color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#green {
|
|||
|
|
background-color: green;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Поскольку `z-index` не определен, он будет иметь значение по умолчанию для `auto` . Это результат:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
Попробуйте изменить порядок на зеленый, синий, красный в CSS с помощью `z-index` .
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#blue {
|
|||
|
|
background-color: blue;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#red {
|
|||
|
|
background-color: red;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#green {
|
|||
|
|
background-color: green;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш результат будет:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
Используйте Z-индекс, если вам нужно поместить элемент фона под контейнером. Вы можете легко разместить фон под каждым элементом, указав на него отрицательный индекс Z, как показано ниже:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#background {
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
[https://css-tricks.com/almanac/properties/z/z-index/](https://css-tricks.com/almanac/properties/z/z-index/)
|
|||
|
|
|
|||
|
|
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS _Позиционирование / понимание_ z\_index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
|
|||
|
|
|
|||
|
|
[https://philipwalton.com/articles/what-no-one-told-you-about-z-index/](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)
|