• ×

    • То, что вам никто не говорил о z-index. Свойство z-index: детальный обзор

    14.07.2019

    От автора: приветствую вас в нашей серии уроков 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.

    Большинство 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 временно скрывать элемент