Координата Z

Для чего нужна координата Z

При изучении CSS мы использовали только две координаты - ширину и высоту. Но при позиционировании элементы могут накладываться друг на друга. Поэтому существует координата Z, которая определяет, какой элемент находится в глубине экрана, а кокой ближе к пользователю.

Устанавливая координату Z, можно определить, какой элемент должен находиться выше и закрывать другие элементы.

Расположение элементов по умолчанию

Позиционированные элементы находятся сверху относительно элементов основного потока. Если позиционированные элементы накладываются друг на друга, то сверху будет тот, который идёт позже в коде страницы.

Установка координаты Z

Координата Z устанавливается с помощью свойства z-index. Это свойство может быть установлено только позиционированным элементам. Оно принимает значения:

z-index: auto; - координата Z не установлена (по умолчанию)

z-index: целое число

z-index: inherit - значение принимается от родительского элемента

Чтобы установить, какой из элементов должен находиться выше, элементам нужно указать разные значения свойства z-index. Выше будет тот элемент, у которого значение больше. Значения не обязательно должны идти по порядку. Они могут быть любыми, главное, чтобы одно было больше другого. Для примера создадим на странице два позиционированных элемента. Пока не будем указывать свойство z-index, посмотрим, как элементы будут располагаться на странице.

Стиль:

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

div
  {
  width: 100px;
  height: 100px;
  position: absolute;
  }
#gr
  {
  background-color: Green;
  }
#bl
  {
  left: 40px;
  top: 40px;
  background-color: Blue;
  }

HTML код:

27
28

<div id="gr"></div>
<div id="bl"></div>

Сейчас синий блок находится сверху и частично закрывает зелёный, потому что синий блок в коде страницы идёт позже зелёного. Теперь сделаем так, чтобы зелёный блок был сверху. Для этого у зелёного блока значение свойства z-index должно быть больше, чем у синего. Я специально установлю значения не по порядку, чтобы показать, что можно указывать любые значения.

Установим зелёному блоку z-index равным 32.

16	z-index: 32;

Синему блоку установим z-index равным 5.

23	z-index: 5;

Зелёный блок оказался выше синего. Если блоку указано свойство z-index, то он будет располагаться выше всех блоков, которым свойство не указано. Поэтому, если блока всего два, то z-index можно указать только тому блоку, который должен быть сверху. Вы можете убрать свойство z-index у синего блока, зелёный блок всё равно останется выше.

Добавьте на страницу ещё несколько блоков, которые будут накладываться друг на друга и пропробуйте установить им разные значения z-index.