› › Что такое z индекс. CSS от А до Я: свойство z-index. Неправильная обработка в IE и Firefox

Что такое z индекс. CSS от А до Я: свойство z-index. Неправильная обработка в IE и Firefox

На самом деле элементы внутри 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 ” был подготовлен дружной командой проекта .

Хорошо Плохо

Большинство 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.

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

Элемент , что и происходит во всех текущих браузерах, за исключением IE6:

– Выберите год – 2009 2010 2011

Коричневый блок

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