Z index 1 css: z-index — CSS — Дока

принцип работы — учебник CSS

Позиционированные элементы можно наслаивать друг на друга при помощи CSS-свойства z-index, тем самым имитируя третье измерение (ось Z, которая перпендикулярна экрану). Эффект можно сравнить со слоями в программе Adobe Photoshop — вы можете определять, какой элемент будет располагаться выше, а какой — ниже. Давайте подробнее разберем принцип работы z-index.

Как работает свойство z-index

Свойство z-index имеет влияние лишь на позиционированные элементы, т. е. такие, для которых установлено свойство position со значением absolute, relative либо fixed. Влияние свойства z-index распространяется как на сам элемент, так и на его дочерние элементы, т. е. поднимая родительский элемент выше по оси Z, вы поднимаете и его дочерние элементы.

Если свойство z-index не задано, то позиционированные элементы накладываются друг на друга в том порядке, в котором они находятся в коде HTML. Это значит, что если на странице есть три абсолютно позиционированных тега, то второй тег из HTML отобразится выше первого, а третий — выше первого и второго.

Ниже показано три примера: на первом скриншоте имеется три абсолютно позиционированных элемента <span> без указания z-index. Как следствие, элементы накладываются друг на друга в обычном порядке. На втором скриншоте добавлено свойство z-index: 1 к первому элементу <span>. Как видим, порядок наложения изменился: теперь первый элемент расположен выше остальных. На третьем скриншоте показано, как можно добиться того же результата, но с применением z-index: 1 к родителю первого тега <span> — тегу <div>:

Значения z-index

Свойство z-index принимает числовые значения — подходят целые числа (положительные, отрицательные, ноль). Чем больше число, тем выше находится элемент по оси Z. При равных значениях z-index элементы накладываются в порядке следования в HTML.

Значением свойства z-index по умолчанию является auto.

Z-index и контекст наложения

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

Контекст наложения (англ. stacking context) — это концепция трехмерного размещения HTML-элементов по оси Z, расположенной перпендикулярно экрану. Контекст наложения может быть сформирован любым элементом, который соответствует хотя бы одному из следующих условий:

• Элемент является корневым, т. е. существует в корневом контексте наложения. Любой элемент веб-страницы является таковым, если только он не присутствует в локальном контексте наложения (в том, который создается любым из способов ниже).
• Абсолютно позиционированный (position: absolute) либо относительно позиционированный (position: relative) элемент с любым значением z-index, кроме auto.
• Элемент со свойством position: fixed и любым значением z-index.
• Элемент со свойством display: flex либо display: inline-flex и любым значением z-index, кроме auto.
• Элемент со свойством opacity и значением менее 1.
• Элемент с любым значением свойства transform, кроме none.
• Элемент с любым значением свойства mix-blend-mode, кроме normal.
• Элемент с любым значением свойства filter, кроме none.

Итак, если соблюдать один из вышеперечисленных пунктов (применить к элементу позиционирование и

z-index либо свойство opacity со значением меньше единицы и т. п.), то формируется новый контекст наложения. Внутри контекста наложения дочерние элементы можно перемещать по оси Z в соответствии с обычными правилами.

Контекст наложения может являться частью другого контекста наложения, тем самым создавая своеобразную иерархию контекстов. Если внутри родителя дочерний элемент создает свой собственный контекст наложения, то значения z-index будут учтены в пределах родителя. Элементы, которые не создают свой контекст наложения, используют родительский контекст наложения.

Один контекст наложения является полностью независимым от соседнего контекста. Это означает, что вы не можете, к примеру, наложить дочерний элемент А из одного контекста поверх дочернего элемента Б из другого контекста, если родитель элемента А находится ниже родителя элемента Б (подразумевается, что эти родители являются создателями разных контекстов).

Ниже показан пример того, как родительский элемент .d1 создает новый контекст наложения при добавлении к нему свойства opacity: 0.99, после чего дочерний элемент

.s1 вновь становится нижним слоем, несмотря на свой z-index:

Это происходит потому, что теперь свойство z-index элемента . s1 работает в пределах контекста наложения своего родителя .d1, тогда как другие два блока <div> пока имеют корневой контекст наложения. Каким же образом снова разместить фиолетовый блок выше других, учитывая свойство прозрачности? Для этого необходимо позиционировать все блоки <div>, после чего можно будет установить для них нужный порядок через z-index:

В завершение

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

В примитивном варианте свойство z-index работает просто: чем больше значение, тем выше находится элемент (слой). Но стоит только столкнуться с разными контекстами наложения (группами), как всё становится намного сложнее, и начинает казаться, что z-index не работает. Рекомендуем дополнительно попрактиковаться в данной теме: создайте различные контексты наложения, используя список выше, и понаблюдайте за тем, как ведут себя элементы с z-index в этих контекстах. А в качестве удобной ассоциации вспоминайте слои и группы Adobe Photoshop.

---

Далее в учебнике: скрытие элементов средствами CSS.

Z-index в CSS разбираем на типичных примерах

Свойство Z-index описывает уровень стека представления элемента на странице относительно остающихся в потоке элементов.

Его значением является число. Вместе с увеличением z-index элемента, близость к пользователю также увеличивается.

Пример кода Z-index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h2>CSS Z-Index</h2>
<div>Webucator</div>
<div>Webucator</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Обратите внимание, как определенные элементы div расположены поверх других.

Если z-index этих элементов изменяется, расположение их стека изменится также.

Display – когда применять?

Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:

• block
• inline
• none

Наиболее типичные примеры применения свойства display:

1. Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
2. Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
3. Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block

Пример ниже демонстрирует, как свойство display может применяться для изменения ссылок в элементы block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h2>Button Links</h2>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

Visibility (Видимость)

Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента. Возможные значения этого свойства:

• visible
• hidden

Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.

[ads-pc-1]
[ads-mob-1]

Оцени статью

Средняя оценка 5 / 5. Количество голосов: 2

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Найти: Сайдбар

Комментарии (0)

Z-индекс CSS

<стиль> дел { ширина: 200 пикселей; высота: 80 пикселей; положение: родственник; отступ: 10 пикселей; семейство шрифтов: без засечек; } . спереди { фоновый цвет: лимонно-зеленый; верх: 70 пикселей; слева: 120 пикселей; z-индекс: 2; } .позади { цвет фона: золото; верх: -80px; слева: 35 пикселей; z-индекс: 1; } <дел> z-индекс: 2