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

Надо понимать, что данное правило работает только в отношении позиционированных тегов, для которых прописано свойство . То есть для стандартного потока документа (где позиционирование не задано или его параметр определен как static) оно действовать не будет. Ниже я продемонстрирую работу z-index на конкретном примере.

Как z-index определяет позиции элемента

Итак, для каждого элемента в CSS находится свое место на вебстранице в соответствии с прописанными для него стилями. Местоположение всех блоков относительно друг друга определяется с помощью системы координат.

В общем случае точка отсчета находится в левом верхнем углу области просмотра (окна браузера). При этом оси X и Y определяют местоположение элементов в плоскости экрана монитора. А вот ось Z, как вы, наверное, догадались, позволяет смоделировать уже пространственную систему координат.

Она расположена перпендикулярно плоскости, образованной X и Y, и направлена прямо на нас. Само собой разумеется, что точкой отсчета по оси Z является ноль. В нулевой точке расположены все статические элементы, для которых определено свойство position static (нормальное позиционирование).

По умолчанию, если position вовсе не прописан, то такая ситуация абсолютно равнозначна той, как если бы был указан параметр static. В этом случае отображение всех HTML элементов страницы происходит в стандартном потоке. Таким образом, position, как, например, и float (в о создании плавающих элементов в CSS информация) дает возможность изменять обычный вариант очередности для решения специальных задач верстки.

Несмотря на то, что для статических вебэлементов значение z равно нулю, то есть они располагаются в плоскости X-Y, для них определены правила в том случае, если они начинают наезжать друг на друга.

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

А вот явно позиционированные (динамические) элементы (со значениями relative, absolute, fixed) находятся выше всех статических. В отношениях между динамическими вэбэлементами будет действовать все тот же закон: тот, что расположен ниже в коде, находится ближе к нам (выше других).

Вот здесь и может сказать решающее слово свойство z-index . Чем больше его значение в числовом выражении, тем выше будет находиться соответствующий элемент вебстраницы. Но все это работает, как я уже сказал, только в отношении элементов с абсолютным (absolute), относительным (relative) или фиксированным (fixed) позиционированием. Синтаксис параметров z-index является следующим:

Z-index: число|auto|inherit

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

Теперь настало время направить наши изыскания в практическое русло, чтобы подтвердить теоретические выкладки. Я возьму для примера три относительно позиционированных (с указанным свойством position: relative). Для наглядности пропишу для каждого цветовой оттенок, рамку, а также укажу отступы слева (left) и сверху (top), ширину (width) и высоту (height):

На вебстранице после интерпретации HTML кода браузером эти три блока будут выглядеть так:

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

Картина изменится:

Как видим, получает преимущество красный контейнер и он теперь находится выше других. Далее попробуем добавить z-index уже зеленому блоку, но уже со значением 2:

Результат будет таким:

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

z-index

Свойство CSS z-index определяет порядок элементов, когда они накладываются друг на друга при позиционировании. То есть с помощью него можно указать, какой элемент (слой) будет находиться сверху, а какие (и в каком порядке) под ним.

Но тут не все так просто. Это свойство является в CSS одним из тех немногих, которые осуществляют сразу две совершенно разные функции (как, например, position):

1. Свойство z-index служит для упорядочивания позиционированных элементов.
2. Каждый элемент с z-index не равным auto создает новый уровень упорядочивания, относительно которого оно (упорядочивание) и происходит для всех его потомков (естественно потомки, у которых z-index не равно auto создают уже свой уровень упорядочивания). Именно поэтому, например, элемент из одного уровня упорядочивания невозможно «положить» между двумя элементами из другого.
3. Корневой элемент создает корневой уровень упорядочивания, даже, если у него не указан z-index .

Давайте рассмотрим такой пример:

В этом примере при любых числовых значениях z-index у вас получится поменять местами только DIV3 и DIV4. А вот не получится следующее:

1. Не получится положить DIV3 и DIV4 под DIV2, так как они находятся на разных уровнях упорядочивания. DIV2 на уровне созданном элементом DIV1, а DIV3 и DIV4 на уровне созданном DIV2. Чтобы они были на одном уровне надо убрать z-index у DIV2 или установить его в auto .
2. Не получится положить DIV2 под DIV1. Чтобы получилось надо установить auto уже у DIV1.
3. И так далее...

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

Тип свойства

Назначение: позиционирование .

Применяется: к элементам с position отличным от static.

Наследуется: нет.

Значения

Значением свойства z-index является указание порядка элементов одним из следующих способов.

• Число - любое целое положительное или отрицательное число, задающее порядок элементов внутри данного уровня упорядочивания. Элемент с бОльшим значением будет расположен поверх тех, у которых оно меньше. Если у двух элементов имеются одинаковые значения, то сверху будет тот, который находится ниже в HTML-коде. Кроме этого, элемент, имеющий числовое значение (в том числе и 0) создает новый уровень упорядочивания для своих позиционированных потомков.
• auto - при этом значении у элемента в текущем уровне упорядочивания такой же z-index , как и у его предка, который этот уровень создал. При этом сам элемент не создает новый уровень упорядочивания для своих потомков. Если есть несколько элементов с данным значением, то сверху будет тот, который стоит ниже в HTML-коде страницы.
• inherit - наследует значение z-index от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

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

1. Первым слоем укладывается фон и рамка элемента, который создал данный уровень упорядочивания.
2. Сверху, вторым слоем, укладываются элементы-потомки, имеющие отрицательные значения z-index , где выше оказывается элемент со значением ближе к нулю.
3. Следующим слоем идут элементы-потомки, которые не являются встроенными (inline).
4. Четвертым слоем идут плавающие элементы (float) вместе со своим содержимым.
5. Пятый слой - это встроенные элементы-потомки.
6. Шестым слоем укладываются элементы с z-index auto или 0, где выше оказывается элемент стоящий ниже в коде.
7. И, наконец, на самом верху располагаются элементы с положительными значениями z-index , где выше оказывается элемент, имеющий большее значение.

Синтаксис

z-index: auto | число | inherit

Пример CSS: использование z-index

Результат.

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значение inherit . Также в этих браузерах новые уровни упорядочивания создают вообще все позиционированные элементы, а не только имеющие числовые значения z-index .

IE 6.0 всегда располагает элемент поверх всех элементов страницы, невзирая на значения z-index .

Firefox 2.0 укладывает элементы с отрицательными значениями z-index под фон и рамку элемента, который создал данный уровень упорядочивания. Другими словами он меняет местами пункты 1 и 2 в правилах наслоения.

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

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

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

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

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

Пример

В данном примере при наведении курсора на карту она выходит на передний край, частично перекрывая остальные собой остальные изображения (рис. 1).

Рис. 1. Изменение порядка карт

Объектная модель

Объект .style.zIndex

Примечание

Список, созданный с помощью

, в браузере Internet Explorer до версии 6.0 включительно всегда отображается поверх других элементов, несмотря на значение z-index .

Internet Explorer до версии 7.0 включительно интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.