Свойство z-index управляет порядком наложения позиционированных элементов в случае, когда они накладываются друг на друга. Свойство принимает целые положительные и отрицательные значения.
В нормальном потоке position: static элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе. По умолчанию установлен z-index: auto; .
Рис. 1. Позиционирование элементов вдоль оси Z
Свойство z-index задает порядок расположения элементов вдоль оси Z. В обычной ситуации элементы с высоким значением индекса будут перекрывать элементы с меньшим значением и значением auto , располагаясь на переднем плане.
Рис. 2. Воздействие свойства z-index на позиционированные элементы
Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде. Если для элементов не задан z-index , браузер отображает элементы на странице в следующем порядке:
Корневой элемент
Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.
Рис. 3. Порядок расположения элементов в 3D пространстве по умолчанию
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Как видно из рисунка, элемент с position: absolute; находится на переднем плане, далее идет текст, под ним располагаются плавающие элементы с float: left; , не позиционированные блочные элементы расположены на заднем плане (так как плавающие и позиционированные элементы удаляются из потока, то блочные не позиционированные элементы их игнорируют и располагаются друг за другом, в соответствии с разметкой, поэтому элемент .
Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов . Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform):
Корневой элемент , который содержит все элементы веб-странице.
Позиционированные элементы с отрицательным значением z-index .
Блочные элементы, не плавающие и не позиционированные.
Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.
Строковые не позиционированные элементы (текст, изображения).
Позиционированные элементы со значениями z-index: 0; и z-index: auto; .
Позиционированные элементы с положительными значениями z-index . Высокое значение индекса отобразит элемент на переднем плане. Элементы с равными значениями z-index будут отображаться согласно их расположения в исходном коде.
Рис. 4. Свойство z-index создает новый контекст наложения элементов в 3D пространстве
Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.
Описание проблемы:
Итак, пусть у нас есть HTML код, состоящий из 3 элементов.Каждый из них внутри себя содержит по одному. А каждый, в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним. Первый имеет z-index , равный 1, у остальных двух z-index не задан.
Ниже представлен HTML код с базовым css оформлением.
.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», позволяющее управлять порядком наложения позиционированных элементов на странице. Начал добавлять «z-index» и ничего хорошего из этого не вышло. Какое бы значение я ему не присваивал, элементы из центральной части страницы все равно перекрывали мою менюшку.
Неоднозначный z-index
Казалось бы, что может быть сложного с z-index? Всем известно, что позиционированные элементы на странице могут накладываться друг на друга. Управлять порядком наложения как раз и позволяет свойство «z-index». Например, если у нас два элемента с присвоенным значением z-index – 5 и 10, то последний будет выведен на переднем плане, т.к. десять больше пяти, а больше, значит ближе. Когда свойство «z-index» не задано, то порядок наложения определяется порядком элементов в документе.
Никаких сложностей вроде нет, пока не начинаешь копать глубже. Первые трудности начинаются при появлении так называемых контекстов наложения. Под контекстом наложения подразумеваются элементы с общими родителями, перемещающиеся вместе на передний или задний план.
У контекста наложения есть корневой элемент. Например, у нас есть какой-то
Для которого мы определяем контекст наложения. Следовательно, все его дочерние элементы тоже попадут в этот же контекст наложения.
Вот тут начинается самое интересное. Контексты наложения не пересекаются между собой. Расположив элемент в самом низу одного контекста, не получиться его поднять выше элемента соседнего контекста. Изменение значение «z-index» даже на самые невероятные цифры не будет приносить ожидаемого эффекта.
Когда формируется новый контекст наложения
Спецификация определяет несколько условий формирования контекста наложения:
Забегая вперед, скажу, для решения моей задачи потребовалось лишь добавить прозрачность (opacity ) для корневого элемента меню и все сразу заработало, как было задумано.
Как отображаются элементы в одном контексте наложения
Чтобы лучше закрепить все выше сказанное, запомним раз и навсегда порядок отображения элементов в одном контексте наложения (от дальнего к ближнему).
Css свойство z-index не похоже на какие-либо другие css свойства. Многие разработчики, сталкиваясь с ним, приходили в замешательство из-за не правильного использования. Однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое и предлагает эффективный метод решения многих задач верстки.
Начнем наш пост со знакомства. Свойство z-index определяет уровень стека html-элемента. «Уровень стека» обозначает позицию элемента на оси Z, направленную перпендикулярно оси X и оси Y. Элемент, которому назначено самое большое значение z-index, располагается в самом верху стека.
Если сначала не все понятно, то думаю после просмотра 3D представления «уровня стека» (оси Z) станет более понятно:
Обычный порядок стека или порядок элементов на оси Z, определяет ряд факторов. Далее предоставлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу:
- Фон и рамка элемента, создающие контекст стека
- Элементы с отрицательным контекстом стека, в порядке появления
- Не позиционированные, не плавающие, блочные элементы, в порядке появления
- Не позиционированные, плавающие элементы, в порядке появления
- Строчные элементы, в порядке появления
- Позиционированные элементы, в порядке появления
Этим трем блокам не назначен z-index.
Все секреты или почему появляется путаница?
Весь смысл свойства z-index заключается в том, чтобы изменять обычный порядок стека, но при неправильном использовании, оно может привести в заблуждение. Это заблуждение появляется потому, что свойство z-index будет работать только у элементов, которые имеют свойство position с одним из трех значений: fixed, relative или absolute.
Использование
Свойство z-index может влиять на порядок элементов как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного целого значения, или значения auto. Значение auto определяет элементу такой же порядок слоев, как у родительского элемента.
#box{
position:relative;z-index:100;
}
На примере покажу как можно при помощи z-index поменять обычный порядок элементов с теми же блоками, как и в первом примере:
Красиво, просто, но при определенных обстоятельствах, в таких браузерах как IE6 и Firefox 2, свойство z-index может обрабатываться по-разному.
IE6: Даешь элементу select больше приоритета!
Дело в том, что такой чудесный браузер как IE6 ни в какую не хочет отображать элемент
С использованием iframe:
Текст блока
При помощи javascript:
Я не буду показывать вам пример, потому что реализация довольно таки простая и действенная. Вы просто прячьте элемент
Firefox 2: Что такое отрицательное значение? Аа?
Вот ведь. А firefox 2 тоже имеет свой недостаток. Хоть его и убрали с поддержки со стороны разработчиков, все же напомню, что forefox 2 не работает с отрицательными значениями z-index и ничего с этим поделать нельзя.
Ну вот. Такое страшное и неведанное css свойство z-index кажется таким простым. Надеюсь, я ничего не упустил. Если вам известны еще какие-то проблемы с z-index, милости прошу в комментарии, потому что я в своей практике с другими не встречался.
Вдохновил .
Большинство CSS-свойств довольно просты в использовании. Зачастую, применение CSS-свойства к элементу в разметке дает мгновенный результат – как только вы обновите страницу, набор значений свойства применится, и вы сразу же увидите результат. Другие CSS-свойства, однако, более комплексные и будут работать только после задания определенного набора условий.
Свойство z-index принадлежит к последней группе свойств. Это свойство так часто вызывало всеобщую путаницу и разочарование, как ни одно, из существующих CSS-свойств. По иронии судьбы, однако, когда вы поближе познакомитесь с z-index , вы поймете, что это свойство очень простое, и предлагает эффективный метод решения многих проблем верстки.
В этой статье вы узнаете, что представляет собой z-index, как он может быть неправильно истолкован, а также некоторые примеры его использования. Кроме того, вы узнаете некоторые различия в поведении браузеров при обработке свойства z-index, это касается в основном предыдущих версий Internet Explorer и Firefox. Этот подробный обзор z-index предоставит разработчикам отличную основу для использования этого свойства уверенно и эффективно.
Что это такое?
Свойство z-index определяет уровень стека HTML-элемента. «Уровень стека» обозначает позицию элемента на оси Z (направленно перпендикулярно оси X, или оси Y). Элемент, которому назначено самое большое значение z-index, будет расположен в самом верху стека слоев. Этот стек слоев, располагается перпендикулярно к экрану, или области просмотра.
3-д представление оси Z:
Для того, чтобы продемонстрировать как работает z-index , картинка, представленная выше, немного увеличивает отображение элементов стека по отношению к области просмотра.
Обычный порядок стека
На HTML-странице, обычный порядок стека (то есть порядок элементов на оси Z), определяет ряд факторов. Далее представлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу. В этом списке нет элементов, с назначенным свойством z-index:
- Фон и рамка элемента, создающие контекст стека
- Элементы с отрицательным контекстом стека, в порядке появления
- Не позиционированные, не плавающие, блочные элементы, в порядке появления
- Не позиционированные, плавающие элементы, в порядке появления
- Строчные элементы, в порядке появления
- Позиционированные элементы, в порядке появления
Когда свойство z-index используется правильно, оно может изменить обычный порядок стека.
Конечно, порядок элементов в стеке не является таким наглядным, пока элементы позиционируются, перекрывая друг друга. Поэтому, чтобы увидеть обычный порядок стека, можно использовать отрицательные поля, как показано ниже:
Серый блок
Синий блок
Коричневый блок
Блокам, показанным выше, назначен разный фоновый цвет и цвет рамки, а последним двум блокам, специально назначены отрицательные верхние отступы, чтобы проиллюстрировать обычный порядок стека. Серый блок появляется первым в разметке, синий блок вторым и коричневый блок третьим. Назначенные отрицательные поля отлично демонстрируют этот факт. Этим элементам не назначены значения z-index , они располагаются на странице в обычном порядке, или по умолчанию. Они накладываются друг на друга, благодаря отрицательным полям.
Почему появляется путаница?
Несмотря на то, что z-index не сложное для понимания свойство, при ошибочном толковании, оно может привести в заблуждение начинающих разработчиков. Это заблуждение появляется потому, что свойство z-index будет работать только с тем элементом, у которого свойство position установлено в одно из трех значений: absolute , fixed или relative .
Чтобы продемонстрировать, что z-index, работает только с позиционированными элементами, вот те же самые три блока, вместе с примененными значениями z-index, для изменения обычного порядка слоев:
Серый блок
Синий блок
Коричневый блок
Серому блоку, установлено значение z-index, равное “9999” ; синему блоку, установлено значение z-index, равное “500” ; и коричневому блоку, установлено значение z-index, равное “1” . Логично было бы предположить, что порядок, в котором уложены блоки, должен изменится. Но этого не случилось в данном примере, потому что, не одному из этих элементов, не назначено свойство position .
Вот те же самые блоки, но только с добавленным свойством position: relative , к каждому из них, и ранее назначенные свойства z-index:
Серый блок
Синий блок
Коричневый блок
Вот теперь, мы получили желаемый результат: Порядок элементов изменился; серый блок перекрывает синий, а синий, в свою очередь, перекрывает коричневый.
Синтаксис
Свойство z-index может влиять на порядок слоев, как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного, целого значения, или значения auto. Значение auto , определяет элементу такой же порядок слоев, как у родительского элемента.
Вот так выглядит CSS-код третьего примера, где свойство z-index применяется правильно:
#grey_box { width: 200px; height: 200px; border: solid 1px #ccc; background: #ddd; position: relative; z-index: 9999; } #blue_box { width: 200px; height: 200px; border: solid 1px #4a7497; background: #8daac3; position: relative; z-index: 500; } #gold_box { width: 200px; height: 200px; border: solid 1px #8b6125; background: #ba945d; position: relative; z-index: 1; }
Опять же, не будет лишним еще раз напомнить, особенно начинающим разработчикам, что свойство z-index не будет работать до тех пор, пока вы не примените позиционирование к элементу.
Использование JavaScript
Если вы хотите динамически изменить значение z-index у элемента, с помощью JavaScript, то это довольно просто. Синтаксис используется такой же, как и для доступа к большинству CSS-свойств, просто замените, записанные через дефис CSS-свойства, на код, как показано ниже:
Var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9999";
Как показано в примере, CSS-свойство « z-index », записывается как « zIndex ». Точно так же, « background-color » становится « backgroundColor », « font-weight » становится « fontWeight », и так далее.
Также, с помощью вышеуказанного кода, изменяется свойство position , потому что, z-index будет работать только с позиционированным элементом.
Неправильная обработка в IE и Firefox
При определенных обстоятельствах, в некоторых браузерах, свойство z-index может обрабатываться по-разному, это касается браузера Internet Explorer, версии 6 и 7, а также Firefox версии 2.
Элементы
В Internet Explorer 6, элемент
Элемент
– Выберите год – 2009 2010 2011
Коричневый блок
Если вы посмотрите на этот пример, с помощью браузера IE6, вы увидите, что элемент
Этот баг в IE6 создает проблемы с выпадающим меню, которое не может перекрыть элементы
Позиционирование Родительских элементов в IE6/7
Internet Explorer версии 6 и 7, неправильно сбрасывает контекст стека, по отношению к ближайшим, позиционированным, дочерним элементам. Для того чтобы продемонстрировать эту, чуть более сложную проблему, давайте снова отобразим два блока, но в этот раз, мы заключим первый блок, в позиционированный элемент.
Серый блок
Синий блок
Серому блоку, назначено свойство z-index, равное «9999» , синему блоку назначен z-index, равный «1» , и оба элемента позиционированы. Следовательно, при правильной обработке, серый блок, должен быть расположен поверх синего блока.
Опять же, если вы посмотрите на этот пример в браузере IE6, или IE7, вы увидите, как синий блок перекрывает серый блок. Эти браузеры неправильно «сбрасывают» контекст стека, по отношению к позиционированному родителю, но так быть не должно. Серому блоку назначено самое высокое значение z-index, и он должен быть расположен поверх синего блока. Все другие браузеры обрабатывают этот пример правильно.
Отрицательные значения в Firefox 2
В Firefox версии 2, отрицательное значение z-index, позиционирует элемент позади порядка слоев, вместо того, чтобы расположить его поверх фона и рамок элемента, которые устанавливают контекст стека. Ниже представлена картинка, иллюстрирующая этот баг в Firefox 2:
Ниже представлена HTML-версия этой картинки, так что, если вы посмотрите на страницу в Firefox 3 или в другом, современном браузере, вы увидите правильную обработку: Фон серого блока (который является элементом, устанавливающим контекст стека) появляется в самом низу, и текст, расположенный в сером блоке, появляется поверх синего блока, который соблюдает правила «обычного порядка слоев», как говорилось выше.
Серый блок
Синий блок
Примеры использования
Применение свойства z-index к различным элементам на странице, может предоставить быстрое решение для различных задач макета, и позволяет дизайнерам создавать более творческие проекты. Некоторые, интересные примеры использования z-index, на практике, приведены ниже.
CSS-Тултипы
Свойство z-index может быть использовано в качестве части тултипа, основанного на CSS, как показано в примере ниже, от trentrichardson.com :
Фото-галерея
Polaroid Photo Gallery , использует некоторые возможности CSS3 вместе с z-index, для создания фото-галереи, с забавным эффектом наведения.
Fancy Thumbnail Hover Effect – здесь, значение z-index изменяется с помощью JQuery-скрипта.
LightBox
Существует огромное количество качественных скриптов light box, для бесплатного использования, например плагин к JQuery FancyBox . Большинство, если не все они, используют свойство z-index:
Скрипты Light box используют полупрозрачное PNG-изображение, для затемнения фона, в то время как новый элемент, похожий на окно