Html z-index

Свойство z-index: детальный обзор | CSS-Tricks по-русски

Большинство CSS свойств просты для понимания. Зачастую, применения какого-либо из них к элементу разметки даёт немедленный результат — стоит только обновить страницу, как видно эффект применения. Однако, есть некоторые свойства, которые сложнее и будут работать только в случае определённых обстоятельств.

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

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

Так что же это за свойство?

Свойство z-index определяет уровень размещения в стеке, глубины html-элемента. «Уровень глубины» означает позицию элемента по оси Z (как перпендикулярную осям X и Y экрана). Чем больше значение z-index, тем элемент будет выше.

Естественное расположение элементов

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

  1. Фон и границы элемента, определяющего контекст стека.
  2. Элементы с отрицательным контекстом стека, в порядке отображения.
  3. Непозиционированные (position: static), а также без установленного свойства float (float: none) блочные элементы (display: block), в порядке отображения.
  4. Непозиционированные, с установленным свойством float, блочные элементы, в порядке отображения.
  5. Строчные (inline) элементы, в порядке отображения.
  6. Элементы с установленным свойством position, в порядке отображения.

Корректное применение свойства z-index, может изменить естественное расположение в стеке.

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

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

Где могут быть проблемы?

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

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

Установим серому элементу z-index равным 9999, синему — 500, а коричневому — 1. Логично ожидать, что порядок изменится. Но не в этом случае, поскольку свойство position по-умолчанию равно static.

Обратите внимание

Установим свойство position в relative и посмотрим что получилось:

А вот теперь у нас получился ожидаемый результат. Порядок элементов изменился, серый элемент находится над всеми, а коричневый в самом низу.

Синтаксис

Свойство z-index влияет как на блочные элементы, так и на строчные (inline). Значением может быть положительное или отрицательное число, либо значение по умолчанию — 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; }

И снова повторюсь, специально для новичков в CSS: свойство z-index не будет работать, пока вы не установите свойство position.

Использование в javaScript

Вы можете повлиять на свойство z-index динамически, используя javaScript. Синтаксис похож на обычный для большинства CSS свойств, с использованием camel-нотации для замены дефиса в свойствах CSS.

var myElement = document.getElementById(«gold_box»); myElement.style.position = «relative»; myElement.style.zIndex = «9999»;

Некорректная реализация в IE и FireFox

В некоторых случаях, в IE6, IE7 и FireFox 2, встречается неверная реализация свойства z-index.

Элемент select в IE6

В Internet Explorer 6, элемент select является windows-контролом, по этой причине он всегда отображается поверх всех элементов, игнорируя обычный порядок размещения, а также свойства position и z-index. Проблема показана на картинке ниже:

Элемент select находится в документе первым, его свойство z-index равно 1, а position установлен в relative. Div выводится после select, а его z-index равен «9999». Исходя из всего этого, div должен находится над select, как это происходит в других браузерах:

Если вы просматриваете эту статью не в IE6, вы увидите что div расположен выше select.

Эта ошибка IE6, является большой проблемой для выпадающих меню, когда они должны перекрывать элемент select. Решением может быть использование javaScript для того чтобы временно скрыть select-ы, а потом, после исчезновения меню, показать опять. Другим решением может быть использование .

Позиционированные родители в IE6/IE7

Internet Explorer версий 6 и 7 некорректно сбрасывают контекст стека в отношении ближайшего позиционированного родителя. Чтобы продемонстрировать эту ошибку, мы опять отобразим два div-а. Но в этот раз мы обернём первый из них в позиционированный элемент.

У серого элемента z-index равен 9999, у синего — 1, оба элемента позиционированы. Поэтому, при корректной реализации, серый элемент отобразится поверх синего.

Если же вы откроете эту страницу в IE6 или IE7, вы увидите что синий элемент перекрывает серый. Это происходит по причине того, что серый элемент обёрнут в ещё один div, которому position установлен в relative.

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

Отрицательные значения в FireFox 2

В FireFox 2, элементы с отрицательным z-index находятся под контекстом стека, вместо того, чтобы быть над фоном и границами элемента, который формирует контекст стека. Пример вы можете увидеть на картинке:

Ниже представлена html-версия

Как видите, фон серого элемента (который формирует контекст стека) находится под синим, а текст (который является inline-элементом в сером элементе) находится над ним, что соответствует правилам естественного расположения, описанным выше.

Примеры использования

В оригинальной статье приведено много примеров использования свойства. Честно говоря мне лень это переводить, в основном — это скриншот, небольшой комментарий и ссылка. Если же всё-таки вам это действительно надо, то пишите, выделю время.

Кроме того, вы можете посмотреть как работает z-index здесь (взято )

Источник: http://www.css-tricks.ru/articles/css/z-index

Свойство z-index

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

В нормальном потоке position: static элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе. По умолчанию установлен z-index: auto;.

Рис. 1. Позиционирование элементов вдоль оси Z

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

Рис. 2. Воздействие свойства z-index на позиционированные элементы

Контекст наложения

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

Корневой элемент , который содержит все элементы веб-странице.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные 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 пространстве

Источник: https://html5book.ru/svoystvo-z-index/

CSS от А до Я: свойство z-index

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

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

Z значит z-index

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Если вам нужно всего лишь изменить порядок слоев, можно просто задать свойство 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 не принято писать код так:

Читайте также:  Продвижение сайта ссылками с ежедневной оплатой

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Я взял 100, чтобы добавить организованности. Так мне понятно, сколько слоев я использую в проекте. Кроме того, если мне понадобится вставить слой между двумя другими, у меня есть целых 99 значений.

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

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

Источник: https://webformyself.com/css-ot-a-do-ya-svojstvo-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.

Элементы в IE6

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

Элемент появляется первым в обычном порядке слоев, и получает значение z-index, равное «1», наряду со значением свойства position, равному relative.

Обратите внимание

Коричневый блок, появляется вторым, в порядке слоев, и ему назначено свойство z-index, равное «9999».

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

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

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

Позиционирование Родительских элементов в 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-изображение, для затемнения фона, в то время как новый элемент, похожий на окно , отображается на переднем плане. PNG-слой и используют свойство z-index, для того чтобы расположить эти элементы поверх всех остальных элементов на странице.

Перевод статьи «The Z-Index CSS Property: A Comprehensive Look«, автор Louis Lazaris

Источник: http://dreamhelg.ru/2009/09/css-property-z-index/

Свойство z-index

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

Чтобы ощутить эффект работы CSS, достаточно просто обновить страницу. Но при этом существуют и некоторые иные свойства каскадных стилей, которые более замысловаты.

Бывают, что работают они не на постоянной основе, а при условии определённых заданных параметров.

Совет

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

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

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

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

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

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

Читайте также:  Описание редиректа в .htaccess

0 браузера Firefox.

Не считая числовых данных, также применяется параметр auto. В этом случае выстраивается автоматический порядок элементов, на основании их расположения в коде HTML.

z-index: 1; z-index: auto; z-index: inherit;

1 – цифра один указывает на первый уровень расположения элемента.

auto – автоматическое расположение элементов.

inherit – указывает на то, что оно наследуется у родителя.

HTML

1<\p>

2<\p>

3<\p> CSS * { margin: 0; padding: 0; } body { color: #333; padding-top: 50px; font-family: Arial, Helvetica, sans-serif; } .container{ width: 280px; height: 280px; margin: 0px auto; position: relative; background-color: #fC3; } .box{ width: 90px; height: 90px; position: absolute; text-align: right; } p{ color: #fff; padding-top: 4px; padding-right: 6px; } .one{ z-index: 3; left: 66px; bottom: 114px; background-color: #c3a65c; } .two{ z-index: 1; left: 90px; bottom: 90px; background-color: #9a7a2d; } .three{ z-index: 2; left: 114px; bottom: 66px; background-color: #3f2d00; }

Источник: http://code-pattern.ru/css/z-index.php

Свойство z-index: принцип работы — учебник CSS

Позиционированные элементы можно наслаивать друг на друга при помощи CSS-свойства z-index, тем самым имитируя третье измерение (ось Z, которая перпендикулярна экрану). Эффект можно сравнить со слоями в программе Adobe Photoshop — вы можете определять, какой элемент будет располагаться выше, а какой — ниже. Давайте подробнее разберем принцип работы z-index.

Как работает свойство z-index

Свойство z-index имеет влияние лишь на позиционированные элементы, т. е. такие, для которых установлено свойство position со значением absolute, relative либо fixed. Влияние свойства z-index распространяется как на сам элемент, так и на его дочерние элементы, т. е. поднимая родительский элемент выше по оси Z, вы поднимаете и его дочерние элементы.

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

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

Обратите внимание

На втором скриншоте добавлено свойство z-index: 1 к первому элементу . Как видим, порядок наложения изменился: теперь первый элемент расположен выше остальных.

На третьем скриншоте показано, как можно добиться того же результата, но с применением z-index: 1 к родителю первого тега  — тегу :

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

Значением свойства z-index по умолчанию является auto.

Z-index и контекст наложения

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

Контекст наложения (англ. stacking context) — это концепция трехмерного размещения HTML-элементов по оси Z, расположенной перпендикулярно экрану. Контекст наложения может быть сформирован любым элементом, который соответствует хотя бы одному из следующих условий:

  • Элемент является корневым, т. е. существует в корневом контексте наложения. Любой элемент веб-страницы является таковым, если только он не присутствует в локальном контексте наложения (в том, который создается любым из способов ниже).
  • Абсолютно позиционированный (position: absolute) либо относительно позиционированный (position: relative) элемент с любым значением z-index, кроме auto.
  • Элемент со свойством position: fixed и любым значением z-index.
  • Элемент со свойством display: flex либо display: inline-flex и любым значением z-index, кроме auto.
  • Элемент со свойством opacity и значением менее 1.
  • Элемент с любым значением свойства transform, кроме none.
  • Элемент с любым значением свойства mix-blend-mode, кроме normal.
  • Элемент с любым значением свойства filter, кроме none.

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

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

Один контекст наложения является полностью независимым от соседнего контекста.

Это означает, что вы не можете, к примеру, наложить дочерний элемент А из одного контекста поверх дочернего элемента Б из другого контекста, если родитель элемента А находится ниже родителя элемента Б (подразумевается, что эти родители являются создателями разных контекстов).

Ниже показан пример того, как родительский элемент .d1 создает новый контекст наложения при добавлении к нему свойства opacity: 0.99, после чего дочерний элемент .s1 вновь становится нижним слоем, несмотря на свой z-index:

Это происходит потому, что теперь свойство z-index элемента .s1 работает в пределах контекста наложения своего родителя .d1, тогда как другие два блока пока имеют корневой контекст наложения.

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

В завершение

В начале урока мы сравнили принцип работы z-index со слоями в Adobe Photoshop. После того, как вы узнали о контекстах наложения, имеет смысл вспомнить и о группах слоев в Фотошопе. Представьте себе, что элемент со свойством z-index — это слой, а контекст наложения — это группа слоев.

Вы можете как угодно изменять порядок наложения слоев в пределах группы. Также вы можете менять порядок наложения самих групп.

Однако вы не можете наложить определенный слой из нижней группы на слои верхней группы — разве что переместить наверх всю нижнюю группу либо извлечь нужный слой из этой группы.

Важно

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

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

Далее в учебнике: скрытие элементов средствами CSS.

Источник: https://idg.net.ua/blog/uchebnik-css/razmetka-css/z-index

Z-index — CSS свойство позиционирования

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

Надо понимать, что данное правило работает только в отношении позиционированных тегов, для которых прописано свойство position со значениями absolute, relative и fixed. То есть для стандартного потока документа (где позиционирование не задано или его параметр определен как 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 наследуется дочерними элементами у родительских.

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

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

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

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

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

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

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

Источник: https://goldbusinessnet.com/uchebnik-css/z-index-css/

Позиционирование

Блок позиционирован относительно крёв элемента родителя.

Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.

А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.

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

  • absolute — Абсолютное позиционирование элемента.
  • relative — Относительное позиционирование элемента.
  • fixed — Фиксированное позиционирование элемента.
  • static — Статическое позиционирование элемента. (Элемент отображаются как обычно.)
  • inherit — Наследует значение элемента родителя.

Теперь давайте углубляться..

Читайте также:  Основные правила ведения блога

Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.

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

  • bottom — Расстояние от нижнего края окна браузера.
  • left — Расстояние от левого края окна браузера.
  • right — Расстояние от правого края окна браузера.
  • top — Расстояние от верхнего края окна браузера.

Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию — auto.

Пример:

Блок №1

Блок №2

Блок №3

Данный блок абсолютно позиционирован!

Блоки 1 и 2 никак не влияют на его месторасположение.

Как видите, в примере третий блок вышел из общего потока элементов и живёт по своим собственным правилам, остальная разметка страницы никак не влияет на месторасположение данного блока.

Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока.

Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top.

Пример:

Элемент родитель — блок №1

Блок №2

Данный блок позиционирован относительно левого края элемента родителя.

В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера.

Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения.

Пример:

Файл style.css

h1 {

color: #800;
text-align: center;
font-size:30px
}
h2 {
color: #088;
text-align: center;
font-size:18px
}
div.blok1 {
background-image: url(fon.gif);
border: #000 2px solid;
padding: 5px;
width: 800px;
height: 4000px
}
div.blok2 {
position: fixed;
left: 250px;
top: 300px;
border: #080 6px double;
padding: 5px;
width: 300px
}
Файл index.html

Какая то страничка

Фиксированный блок с навязчивой рекламой

Купи слона!!

Фиксированный блок, выведен из общего потока элементов, при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.

P.S. Ранние версии браузера Internet Explorer игнорируют данное свойство и элемент выводится на странице так как будто его вовсе не позиционировали.

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

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

Значения свойства z-index:

  • auto — Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).
  • целое число — Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.

Пример:

z-index
 
 
 
 

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

Еще следует отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных.

Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам.

Обратите внимание

Ну и какой смысл, спросите Вы, вообще использовать z-index если можно просто в нужном порядке расположить элементы в HTML коде?

Покажу на примере:

Проведите курсором по картам

В злосчастном IE6, в отличии от других браузеров, псевдокласс :hover работает только для ссылок, поэтому в качестве контейнера для рисунков/карт использую никуда не ведущую ссылку. (a href=»#»)

Впрочем, IE можно «надурить» используя скрипты, просто не хочу лишний раз выходить за рамки обучения CSS.

Как видите свойство z-index незаменимо там, где присутствует некая динамика.

Попугаю немного:

  • Списки, созданные с помощью тега select, в Internet Exolorer отображаются поверх других элементов, несмотря на то, какое указано значение z-index.
  • В браузере Netscape 4.x поля форм всегда отображаются поверх всех других элементов, независимо от значения z-index..
  • Браузер Netscape 4.x относительно (position: relative) не позиционирует поля форм, списки, изображения, таблицы и их ячейки, а абсолютное позиционирование (position: absolute) не работает со списками и элементами форм.
  • Ранние версии Internet Explorer, до Internet Explorer 5.5, игнорируют свойство z-index примененное к фреймам (frame) и плавающим фреймам (iframe).
  • В IE 4 абсолютное позиционирование (position: absolute) примененное к ссылкам и спискам не работает, ссылки так вообще теряют свою функциональность.. а относительное позиционирование (position: relative) не дружит с ячейками таблицы (td и th).
  • Про фиксированное позиционирование (position: fixed) и ранние версии Internet Explorer уже говорил.. не работает фиксация блоков в ранних IE и все тут..

Такие дела.. ну хочу заметить, что поклонников браузера IE (домохозяек, для которых Интернет и встроенный в комплектацию Windows Internet Explorer это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак..

Источник: http://www.webremeslo.ru/css/glava12.html

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши

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

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

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

Z-index в CSS — позиционирование по оси Z

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

Две другие оси, X и Y, имеют начальную точку отсчета в правом верхнем углу экрана (для тех, кто пишет слева направо) или в левом верхнем углу (для тех, кто пишет набором — арабы, например).

Естественно, что точкой отсчета на оси Z является ноль.

Именно в ней и располагаются все статичные элементы Html кода (для которых значение position не прописано, а значит браузер его интерпретирует как static).

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

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

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

А вот если у тега прописано значение для position — relative, absolute или fixed, то они будут автоматически располагаться выше (ближе к нашим глазам) по отношению ко всем статическим. Спозиционированные тэги ведь можно двигать с помощью CSS правил Left, right, top и bottom, а значит они должны быть априори расположены выше (ближе к нам) относительно всей остальной статики на веб-странице.

Важно

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

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

Но положением на оси Z у таких тегов (с position — relative, absolute или fixed) можно будет играться по своему разумению с помощью правила z-index.

Для статичных же тэгов (с «position: static» используемым по умолчанию) правило z-index работать не будет. В этом заключается его специфика. По умолчанию оно имеет значение Auto или тоже самое, что ноль (действие которого мы подробно рассмотрели чуть выше):

Но также в качестве значения для z-index можно использовать положительные и отрицательные цифры.

Давайте все рассмотрим его работу на простом примере. Пусть у нас имеется один большой контейнер Div с текстом (контентом) и относительным позиционированием (position:relative), а внутри него заключены два других Div с фиксированным размером и абсолютным позиционированием (position:absolute относительно левого верхнего угла внешнего контейнера):

текст или же контент внешнего контейнера

Внутренним контейнерам я задал сдвиги и фоновые цвета для пущей наглядности. Почему на оси Z эти элементы расположились именно в таком порядке? Очевидно, что подчиняясь умолчательному правилу — чем ниже тег в коде, тем ближе он к нашим глазам. Ну, а теперь давайте применим, наконец-то, правило z-index и посмотрим, что из этого получится.

По умолчанию оно имеет значение ноль, поэтому прописав для красного блока z-index:1, мы выдвинем его на первый план:

Совет

Все довольно просто и понятно. Единица обозначает число на оси Z (первый уровень после нуля).

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

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

Если оно окажется у спозиционированных элементов одинаковым, то выше будет стоять тот элемент, который в коде веб-страницы расположен ниже. И как я уже упоминал чуть выше, значение для него может быть использовано со знаком минус (быть отрицательным). Давайте пропишем z-index:-1 для красного блока и посмотрим что из этого получится:

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

Cursor — изменяем внешний вид курсора мыши

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

Т.к. браузер тоже является частью операционной системы, то все эти виды курсоров будут появляться и при вашей работе с веб-страницами. По умолчанию для правила Cursor используется значение Auto и в этом случае браузер сам решает, что показать.

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

Обратите внимание

Если опираться на спецификацию CSS с кладбища стандартов всемирной паутины WWW, то значений у Cursor может быть очень много:

Как я уже говорил, по умолчанию для него используется Auto. Ну, а все остальные значения для Cursor вы можете увидеть на приведенном ниже примере (подводите курсор мыши к разным строкам и смотрите как изменится его вид:

  • cursor: auto
  • default
  • pointer
  • crosshair
  • text
  • wait
  • help
  • move
  • e-resize
  • ne-resize
  • nw-resize;»
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • progress
  • ol-resize;»
  • not-allowed
  • row-resize
  • vertical-text
  • cursor: url (https://ktonanovenkogo.ru/image/cursor.cur), cursor_type
  • all-scroll
  • no-drop

Источник: https://KtoNaNovenkogo.ru/html/uroki-css/z-index-css-cursor.html

Ссылка на основную публикацию