Объясняем Z-index: как позиционировать элементы с помощью CSS. Как работает z-index

Верстаю далеко не первую страницу, но с подобной проблемой столкнулся впервые. В одном из дизайнов мне потребовалось переделать меню для каталога. Изначально использовалось меню с одним уровнем, но бизнес заказчика вырос, и потребовалось реализовать типичное выпадающее многоуровневое меню. «Нет проблем!» - подумал я, и быстренько стал набрасывать дополнительные стили с разметкой. Времени много на это не потребовалось, но вот первое же тестирование оказалось неудачным. Уровни меню появлялись, как и было задумано, но вот почему-то их перекрывали элементы из центральной части страницы.

«Ха!» - промелькнуло у меня в голове. Наверное, в одном из стилей не хватает свойства «z-index», позволяющее управлять порядком наложения позиционированных элементов на странице. Начал добавлять «z-index» и ничего хорошего из этого не вышло. Какое бы значение я ему не присваивал, элементы из центральной части страницы все равно перекрывали мою менюшку.

Неоднозначный z-index

Казалось бы, что может быть сложного с z-index? Всем известно, что позиционированные элементы на странице могут накладываться друг на друга. Управлять порядком наложения как раз и позволяет свойство «z-index». Например, если у нас два элемента с присвоенным значением z-index – 5 и 10, то последний будет выведен на переднем плане, т.к. десять больше пяти, а больше, значит ближе. Когда свойство «z-index» не задано, то порядок наложения определяется порядком элементов в документе.

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

У контекста наложения есть корневой элемент. Например, у нас есть какой-то

Для которого мы определяем контекст наложения. Следовательно, все его дочерние элементы тоже попадут в этот же контекст наложения.

Вот тут начинается самое интересное. Контексты наложения не пересекаются между собой. Расположив элемент в самом низу одного контекста, не получиться его поднять выше элемента соседнего контекста. Изменение значение «z-index» даже на самые невероятные цифры не будет приносить ожидаемого эффекта.

Когда формируется новый контекст наложения

Спецификация определяет несколько условий формирования контекста наложения:

В роли элемента выступает корневой элемент HTML-документа (тэг);

Элементу задана прозрачность (вспоминаем про свойство opacity) меньше единицы;

Элемент позиционирован не статически и свойство z-index != auto.

Забегая вперед, скажу, для решения моей задачи потребовалось лишь добавить прозрачность (opacity ) для корневого элемента меню и все сразу заработало, как было задумано.

Как отображаются элементы в одном контексте наложения

Чтобы лучше закрепить все выше сказанное, запомним раз и навсегда порядок отображения элементов в одном контексте наложения (от дальнего к ближнему).

Корневой элемент контекста, т.е. элемент, образовавший контекст наложения;

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

Не позиционированные элементы располагаются по порядку;

Позиционированные элементы (+ потомки) со значением z-index в auto располагаются по порядку (в соответствии с разметкой);

Позиционированные элементы (+ потомки) с положительным значением z-index (чем больше z-index, тем ближе будет элемент). Если у двух элементов одинаковый «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

#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. Результат будет такой же.

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

В данной статье речь пойдет о том, как поместить слой или элемент в 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 больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в

Проблема 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

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством z-index.

Полный видеоурок и его текстовую версию по свойству z-index можно посмотреть по ссылке .

Z значит z-index

Как и следовало ожидать, последняя статья в серии будет полностью посвящена свойству z-index.

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

z-index работает только с позиционированными элементами

Если вам нужно изменить порядок слоев на элементах, это можно сделать с помощью свойства z-index. Однако данное свойство будет работать только с элементами, у которых задано свойство position в значения absolute, relative или fixed.

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

Если вам нужно всего лишь изменить порядок слоев, можно просто задать свойство position: relative и не указывать top, right, bottom или left. Элемент останется на своем месте, структура документа не нарушится, а свойство z-index сработает как надо.

В свойстве z-index можно указывать отрицательные значения

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

Отрицательные значения можно использовать с псевдоэлементами для их размещения за контентом родительского элемента.

Для размещения псевдоэлементов:before или after под текстом родительского элемента необходимо указать отрицательное значение. Таков принцип работы стека.

Взгляните на CodePen демо ниже, можете поиграться с разными значениями z-index.

Используйте 100 в качестве инкремента для z-index

При работе с z-index не принято писать код так:

Modal { z-index: 99999; }

Modal {

z - index : 99999 ;

Мне больно смотреть на этот код. Все становится еще хуже, когда добавляются!important. Подобный код – признак того, что разработчик не понимает контекста стека и пытается принудительно расположить один слой над другим.

Чтобы не использовать произвольные числа типа 9999, 53 или 12, мы можем систематизировать нашу шкалу z-index и привести ее в порядок. И это не потому, что я разработчик с обсессивно-компульсивным расстройством. Честно.

В качестве инкремента для z-index я использую не однозначное число, а 100.

Layer-one {z-index: 100;} .layer-two {z-index: 200;} .layer-three {z-index: 300;}

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

Вот и все, друзья. Это была последняя статья из серии CSS от А до Я! Надеемся, вам понравилось, и вы узнали много нового о свойствах CSS.