То, что вам никто не говорил о z-index. CSS от А до Я: свойство z-index

В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS . А точнее при помощи свойства z-index .

Скорее всего, каждый из вас в детстве делал Аппликации . Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы - дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.

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

Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер. В общем, область применения у этого свойства очень широкая и ограничивается только вашей фантазией.

Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute , relative или fixed . Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom , top , left , right . Но не только в этом случае может понадобиться расставление z-index . Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.

Если вы не указываете z-index , то для всех элементов по-умолчанию он равен 0 . z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).

Вот как может выглядеть код CSS -стилей для 3

с заданными z-index , так что они располагаются по принципу, чем первее
в коде, тем он более на переднем плане (противоположно принципу по-умолчанию), это в Демо пример №2 :

div {position: absolute; text-align:center; font-weight:bold;} div.first {width:100px; height:100px; background:#006600; left:0; top:50px; z-index:2;} div.first2 {width:100px; height:100px; background:#990000; left:50px; top:100px; z-index:1;} div.first3 {width:100px; height:100px; background:#99FF66; left:100px; top:150px; z-index:0;}

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

На самом деле элементы внутри HTML-документа генерируются в трех измерениях. Кроме привязки к осям X и Y их также можно размещать по оси Z . Для этого для элемента должно быть установлено CSS position relative или другие значения данного свойства:

Такие свойства, как margin , float и offset отвечают за то, где элемент будет располагаться на осях х и y , в то время как за расположение на оси z отвечает свойство z-index .

Свойство z-index

Это свойство позволяет определить:

  • Расположение текущего элемента в стеке;
  • Определяет ли текущий элемент новый контекст наложения (stacking level ).

Это свойство применимо исключительно к элементам с установленным позиционированием. То есть, свойство position элемента должно быть установлено как relative , absolute или fixed . У свойства z-index имеется три значения:

Пример кода

z-index: auto | | inherit

Уровень стека (очередность отображения элементов)

Это значение определяет, где именно на оси Z находится элемент. Чем больше число, тем выше элемент будет в стеке и к «поверхности » экрана:


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

Вычисляем позицию в стеке

Кроме свойства z-index на position relative CSS элемента в стеке также влияет несколько факторов. Элементы располагаются в стеке в следующем порядке:

Позиция Описание CSS-код
1 (bottom) Элемент формирует контекст наложения. z-index:
2 Дочерние элементы с отрицательным уровнем стека. z-index:
3 Дочерние элементы со стилизацией In-flow, non-inline или без установленного позиционирования. display: /* not inline */

position: static

4 Плавающие дочерние элементы без установленного позиционирования. float: left | right

position: static

5 Дочерние элементы со стилизацией In-flow inline или без выставленного позиционирования. display: /* inline */

position: static

6 Дочерние элементы с 0 уровнем стека. z-index: auto | 0

position: relative | absolute | fixed

7 (top) Дочерние элементы с положительным уровнем стека. z-index:

position: relative | absolute | fixed

Контекст наложения (stacking context)

При указании CSS position relative z index мы не всегда определяем ее относительно всех остальных элементов на странице. Уровень элемента в стеке отражает лишь его позицию в рамках отдельного контекста наложения.

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

Контекст наложения можно объяснить следующими правилами:

1. Исходный контекст наложения заключен в корневом элементе

Исходный контекст наложения в любом HTML-документе заключен в корневом элементе . До тех пор, пока не создано новых контекстов, уровень элемента в стеке будет по умолчанию относиться ко всем элементам на странице.

2. Создание новых контекстов с указанным свойством z-index

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

Впоследствии новый контекст будет применяться ко всем дочерним элементам данного элемента. Их уровень теперь указывается только в рамках данного контекста, и не относится к корневому элементу.

В приведенном ниже примере .foo относится к контексту наложения 1, а .bar – к контексту наложения 2:


3. Элементы нельзя располагать выше или ниже уровня родительского

Если у родительского элемента имеется установленный CSS position relative z index , то все дочерние элементы не могут располагаться над или под этим уровнем (в рамках контекста наложения родительского элемента ). В приведенном ниже примере, несмотря на то, что у .bar значение z-index выше, чем у .baz , этот элемент все равно расположен “под ” ним. Так происходит потому, что в контексте 1 .bar не может располагаться выше или ниже уровня 1.

CSS
.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }


Перевод статьи “How z-index Works ” был подготовлен дружной командой проекта .

Хорошо Плохо

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному. А каждый, в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним. Первый имеет z-index , равный 1, у остальных двух z-index не задан.

Ниже представлен HTML код с базовым css оформлением.

Red
Green
Blue

.red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; }
Пример на jsfiddle

Задача: сделать так, чтобы красный был позади синего и зеленого, при этом не нарушая ни одно из следующих правил:

  • Нельзя менять HTML разметку
  • Нельзя менять/добавлять z-index к элементам
  • Нельзя менять/добавлять позиционирование к элементам

Решение:

Решение состоит в том, чтобы добавить прозрачность чуть меньше единицы первому (родителю красного).
Вот css, иллюстрирующий это:
div:first-child { opacity: .99; }

Хм, что-то тут не так. Причем тут вообще прозрачность? Каким образом она может влиять на порядок перекрытия элементов? Вы думаете так же? Добро пожаловать в клуб!
Надеюсь, во второй части статьи всё встанет на свои места.

Порядок наложения элементов:

Z-index кажется очень простым: чем значение больше, тем ближе к нам будет элемент, т.е. элемент с z-index 5 будет перекрывать собой элемент с z-index 2, верно? На самом деле нет.
Это и есть проблема z-index. Всё кажется настолько очевидным, что большинство разработчиков не уделяют достаточно времени для изучения этого вопроса.

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

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

Если вы явно указываете позиционирование элементам (и их детям), то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. (Говоря «явно указываете позиционирование» – я имею ввиду любое значение, кроме статического, например: абсолютное, или относительное).

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

Контекст наложения

Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

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

Новый контекст может быть сформирован в следующих случаях:

  • Если элемент – корневой элемент документа (элемент)
    Если элемент позиционирован не статически и его значение z-index не равно auto
    Если элемент имеет прозрачность менее 1

Розовый квадрат имеет значение z-index, отличное от auto, что создает новый контекст наложения. Появление контекста наложения влияет на то, как отображаются дочерние элементы.

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

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






https://codepen.io/ivhed/pen/erGoJE

Контекст наложения формируется не только при применении свойства z-index. Существует несколько других свойств , которые заставляют элементы создавать контексты наложения. Некоторые примеры: filter (фильтр), opacity (непрозрачность), and transform (трансформация).

Вернемся к нашему предыдущему примеру. Синий квадрат снова связан с розовым. На этот раз вместо добавления свойства z-index розовому квадрату мы применим к нему фильтр .





Blue, .pink, .orange {
position: absolute;
} .pink {
filter: hue-rotate(20deg);
} .blue {
z-index: 2;
} .orange {
z-index: 3;
} .green {
z-index: 100;
}

https://codepen.io/ivhed/pen/LmWMQb

Оранжевый квадрат по-прежнему имеет более высокий z-индекс, чем синий, но по-прежнему отображается позади него. Это связано с тем, что значение фильтра заставило розовый квадрат создать новый контекст наложения.

Резюме

Используя z-индекс для позиционируемых элементов, мы можем изменить порядок наложения элементов, заданный по умолчанию.

При применении определенных CSS-свойств элемент может формировать контекст наложения. Значения z-индекса имеют смысл только в одинаковом контексте наложения.

Для получения дополнительной информации о принципе работы свойства z-index, рекомендую вам ознакомиться с этой статьей . Именно она вдохновляла меня в процессе работы над этой публикацией.

Сегодняшний урок, как и вчерашний, поведает Вам о позиционировании в CSS, а также про очень интересное свойство под названием z-index.

С помощью этого свойства можно располагать блоки текста (и не только текста) друг над другом, при этом получая что-то наподобие 3Д эффекта.

Данный урок будет очень полезен новичкам в веб дизайне, так как кроме теоретической информации, мы рассмотрим и практический пример.

Для наглядности посмотрите на два изображения ниже:

"Относительное позиционирование"

"Абсолютное позиционирование"

Как Вы видите, при относительном позиционировании, блок с текстом размещается по отношению к абзацу с текстом. При абсолютном - по отношению к окну браузера.

Работу данного свойства проще всего также объяснить изображением:

Элемент с более высоким значением будет находиться выше.

Теперь давайте более подробно рассмотрим наше демо.

Создание 1-го блока


Layer 1











#layer1 {
background:#707070;
color:#fff;
position:relative;
width:800px;
height:450px;
}

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

Создание 2-го блока

По аналогии с 1-м блоком создаем блок. Отличается этот блок только идентификатором (id="layer2").


Layer 2


Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry"s standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.


#layer2 {
background:#f9ad81;
color:#fff;
position:absolute;
top:40px;
left:50px;
width:400px;
height:400px;
z-index:1;
}

Второму блоку придаем абсолютное позиционирование. Теперь он точно будет внутри первого и никуда не денется. Кроме этого, определяем атрибут z-index (=1). Это значит, что блок №2 будет находиться над первым.

Создание 3-го блока


Layer 3


Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry"s standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.


#layer3 {
background:#6dcff6;
color:#fff;
position:absolute;
top:80px;
left:100px;
width:600px;
height:200px;
z-index:2;
}

В этом блоке z-index = 2.

Вы можете попробовать поменять местами индексы у блоков и посмотреть на результат.

Запомните, что элемент с меньшим z-index всегда будет находиться под элементом с высшим. То есть, Вы можете придать блоку №1 индекс = 999, а блоку №2 - 1000. Результат будет такой же.

На сегодня все! Спасибо за внимание!

Понравилась статья? Поделиться с друзьями: