Как использовать свойство CSS z-index для 3D
От автора: в этой статье вы узнаете, как использовать свойство CSS z-index… Единственный способ проникнуть в 3-е измерение с помощью CSS!
В большинстве случаев, когда вы стилизуете вещи с помощью CSS, это происходит в 2D плоскости. Элементы HTML размещаются на странице горизонтально / вертикально, как стекируемые блоки в тетрисе. z-index изменяет эту парадигму и дает возможность определить визуальную иерархию на 3 плоскости: Z-оси.
В этом фрагменте кода #navbar будет перекрывать #footer (если их позиция совпадает), потому что у него более высокий z-индекс.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее#navbar { position: relative; z-index: 11; } #footer { position: relative; z-index: 10; }
#navbar { position: relative; z-index: 11; }
#footer { position: relative; z-index: 10; } |
Если бы мы не использовали z-index вообще, то панель навигации просто сместила бы нижний колонтитул вместо того, чтобы перекрывать его.
Использование z-index
Само по себе это немного абстрактно, поэтому давайте посмотрим, как z-index используется.
<div> <div><img src=»womens-outerwear.jpeg»/></div> <div>Fashion Catalog 2030</div> </div>
| <div> <div><img src=»womens-outerwear.jpeg»/></div> <div>Fashion Catalog 2030</div> </div> |
#portrait { position: relative; z-index: 1 width: 200px; } #magazine-title { position: relative; z-index: 2; top: -2em; left: 2em; font: normal 2em sans-serif; color: darkslategray; background-color: whitesmoke; border: 3px dotted darkslategray; }
#portrait { position: relative; z-index: 1 width: 200px; }
#magazine-title { position: relative; z-index: 2; top: -2em; left: 2em; font: normal 2em sans-serif; color: darkslategray; background-color: whitesmoke; border: 3px dotted darkslategray; } |
Используя z-index, мы можем заставить текст перекрывать изображение!
Небольшое предостережение
Если у вас острый взгляд, вы, вероятно, заметили, что в предыдущих фрагментах кода z-index использовалось вместе с position: relative. Это не было совпадением: z-index правило работает только с «позиционированными элементами». Забыв о применении правила position, вы фактически проигнорируете правило z-index.
div { position: static | relative | absolute | sticky | fixed; z-index: 1; }
div { position: static | relative | absolute | sticky | fixed; z-index: 1; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПозиционированным элементом является элемент HTML, который имеет позицию relative, absolute, fixed или sticky. По сути, все кроме static.
Соперничество между дочерними элементами
Еще одно небольшое замечание: z-index работает только для HTML-элементов одного уровня. Для двух HTML-элемента, более глубоко вложенный HTML-элемент всегда будет перекрываться менее глубоко вложенным HTML-элементом с более низким значением z-index. Вот демонстрация, иллюстрирующая, это поведение:
<div> <div></div> <div></div> </div> <div></div>
<div> <div></div> <div></div> </div> <div></div> |
.blue { position: relative; z-index: 2; background-color: blue; } .violet { position: relative; z-index: 4; background-color: violet; } .purple { position: relative; z-index: 1; background-color: purple; } .green { position: relative; z-index: 3; background-color: green; top: -4em; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .blue { position: relative; z-index: 2; background-color: blue; } .violet { position: relative; z-index: 4; background-color: violet; } .purple { position: relative; z-index: 1; background-color: purple; } .green { position: relative; z-index: 3; background-color: green; top: -4em; } |
Элемент div.violet будет перекрываться div.green, несмотря на более высокое значение z-index!
Значения для z-index должны быть положительным / отрицательным целым числом. Это не значит, что вы можете иметь неограниченное количество слоев по оси Z! Максимальный диапазон составляет ±2147483647.
В базах кода CSS вы часто будете видеть значения z-index 999, 9999 или 99999. Это, возможно, ленивый способ гарантировать, что элемент всегда находится сверху. Это может привести к проблемам в будущем, когда несколько элементов должны быть на вершине. В большинстве случаев вы обнаружите, что для ваших нужд достаточно z-индекса 1 или 2.
Заключение
Давайте вспомним некоторые из вещей, которые мы узнали о z-index:
Через z-index можно создавать перекрывающиеся слои на оси Z!
z-index работает только с позиционированными элементами
z-index работает только для элементов HTML одного уровня
Когда вы накладываете контент, он может создавать интересные дизайны! Надеюсь, вы получили хорошее представление о том, как z-index работает! Посетите MDN для получения более подробной информации о свойстве z-index.
Автор: William Le
Источник: https://alligator.io
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьindex | CSS — Примеры
Чем больше значение z-index, тем выше находится элемент [w3.org].
z-index: auto | <integer>
| auto | Тоже же, что 0, но не устанавливает новый контекст наложения |
|---|---|
| <integer> | Положительное или отрицательное целое число |
z-index не работает с position: static;. Значения relative, absolute и fixed равнозначны
Пример: зелёный с z-index: 2; находится под красным z-index: 1; только когда имеет значение по умолчанию.
z-index: 2; staticrelativeabsolutefixed
z-index: 1; staticrelativeabsolutefixed
<style>
.raz0 {
height: 4em;
}
.raz0 div {
width: 7em;
height: 4em;
}
.raz0 div:nth-child(1) {
z-index: 2;
margin-bottom: -4em;
border-right: 2em solid DarkGreen;
background: green;
}
.raz0 div:nth-child(2) {
z-index: 1;
margin-left: 7em;
border-left: 2em solid DarkRed;
background: red;
}
</style>
<div>
<div>z-index: 2;</div>
<div>z-index: 1;</div>
</div>Если у соседних элементов одинаковое значение z-index, то нижние в коде теги показаны над верхними
У дочернего элемента родителя, имеющего z-index не auto и position, отличный от static, z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым
Отрицательный z-index перемещает элемент перед background, border, box-shadow контекста наложения
Вложенные элементы отображаются над родителем. Единственный способ поместить дочерний тег ниже родителя — присвоить ему отрицательный z-index.
Примеры использования:
- Пунктирная рамка внутри блока
- Красивая тень блока на CSS
z-index и opacity
opacity меньше 1 рассматриваются как z-index: 0;
position не static и z-index не auto, то положение измениться в соответствии с последними свойствами CSS.Новый контекст наложения создаётся для элементов
- <body>
- с
z-indexнеautoиposition, отличным отstaticopacityменьше1transformнеnonewill-change- и т.д. (здесь указан список)
Советы по использованию свойства z-index
- Если можно не использовать
z-index, то лучше его не использовать и, например, сразу в HTML коде разместить теги в требуемом порядке. - Если
z-indexвсё же нужен, скажем, для выпадающего меню, то значений0,1,2,3,4,5вполне достаточно в большинстве случаев, не нужно переходить на десятки, а то и сотни. - Если
z-indexне работает, то нужно подняться вверх по дереву DOM, чтобы понять где контекст наложения.
Примечание: IE 6-7 рассматривает значение auto как 0 и всем position не static создаёт контекст наложения.
seodon.ru | CSS справочник — z-index
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS z-index определяет порядок элементов, когда они накладываются друг на друга при позиционировании. То есть с помощью него можно указать, какой элемент (слой) будет находиться сверху, а какие (и в каком порядке) под ним.
Элементы с разным значением свойства z-index.
Но тут не все так просто. Это свойство является в CSS одним из тех немногих, которые осуществляют сразу две совершенно разные функции (как, например, position):
- Свойство z-index служит для упорядочивания позиционированных элементов.
- Каждый элемент с z-index не равным auto создает новый уровень упорядочивания, относительно которого оно (упорядочивание) и происходит для всех его потомков (естественно потомки, у которых z-index не равно auto создают уже свой уровень упорядочивания). Именно поэтому, например, элемент из одного уровня упорядочивания невозможно «положить» между двумя элементами из другого.
- Корневой элемент <HTML> создает корневой уровень упорядочивания, даже, если у него не указан z-index.
Давайте рассмотрим такой пример:
<body>
<div>
<div>
<div>
DIV3
</div>
<div>
DIV4
</div>
</div>
</div>
</body>В этом примере при любых числовых значениях z-index у вас получится поменять местами только DIV3 и DIV4. А вот не получится следующее:
- Не получится положить DIV3 и DIV4 под DIV2, так как они находятся на разных уровнях упорядочивания. DIV2 на уровне созданном элементом DIV1, а DIV3 и DIV4 на уровне созданном DIV2. Чтобы они были на одном уровне надо убрать z-index у DIV2 или установить его в auto.
- Не получится положить DIV2 под DIV1. Чтобы получилось надо установить auto уже у DIV1.
- И так далее…
В разных учебниках и справочниках понятие «Уровень упорядочивания» называют по разному — локальный позиционный контекст, локальный контекст стека и т.д. В официальной спецификации CSS оно пишется так — «local stacking context». Но на мой взгляд словосочетание «уровень упорядочивания» ближе к пониманию для большинства русскоговорящих людей, поэтому я и ввел это определение.
Тип свойства
Назначение: позиционирование.
Применяется: к элементам с position отличным от static.
Наследуется: нет.
Значения
Значением свойства z-index является указание порядка элементов одним из следующих способов.
- Число — любое целое положительное или отрицательное число, задающее порядок элементов внутри данного уровня упорядочивания. Элемент с бОльшим значением будет расположен поверх тех, у которых оно меньше. Если у двух элементов имеются одинаковые значения, то сверху будет тот, который находится ниже в HTML-коде. Кроме этого, элемент, имеющий числовое значение (в том числе и 0) создает новый уровень упорядочивания для своих позиционированных потомков.
- auto — при этом значении у элемента в текущем уровне упорядочивания такой же z-index, как и у его предка, который этот уровень создал. При этом сам элемент не создает новый уровень упорядочивания для своих потомков. Если есть несколько элементов с данным значением, то сверху будет тот, который стоит ниже в HTML-коде страницы.
- inherit — наследует значение z-index от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: auto.
Так как внутри элемента создающего уровень упорядочивания могут быть не только позиционированные элементы, но и какие-то другие, то браузеры используют определенный правила их наслоения в пределах данного уровня:
- Первым слоем укладывается фон и рамка элемента, который создал данный уровень упорядочивания.
- Сверху, вторым слоем, укладываются элементы-потомки, имеющие отрицательные значения z-index, где выше оказывается элемент со значением ближе к нулю.
- Следующим слоем идут элементы-потомки, которые не являются встроенными (inline).
- Четвертым слоем идут плавающие элементы (float) вместе со своим содержимым.
- Пятый слой — это встроенные элементы-потомки.
- Шестым слоем укладываются элементы с z-index auto или 0, где выше оказывается элемент стоящий ниже в коде.
- И, наконец, на самом верху располагаются элементы с положительными значениями z-index, где выше оказывается элемент, имеющий большее значение.
Синтаксис
z-index: auto | число | inherit
Пример CSS: использование z-index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство z-index</title>
<style type="text/css">
div {
width: 160px; /* ширина блоков DIV */
height: 80px; /* высота */
position: absolute; /* абсолютное позиционирование */
}
#div1 {
background: #cc99ff; /* фон DIV1 */
z-index: 1; /* порядок слоя */
}
#div2 {
background: #99ffcc; /* фон DIV2 */
z-index: 2; /* порядок слоя */
top: 40px; /* сдвиг вниз */
left: 90px; /* сдвиг вправо */
}
#div3 {
background: #ffcc99; /* фон DIV3 */
z-index: 3; /* порядок слоя */
left: 190px; /* сдвиг вправо */
}
</style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV3</div>
</body>
</html>Результат примера
Результат. Использование свойства CSS z-index.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 | 3.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Частично | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit. Также в этих браузерах новые уровни упорядочивания создают вообще все позиционированные элементы, а не только имеющие числовые значения z-index.
IE 6.0 всегда располагает элемент <SELECT> поверх всех элементов страницы, невзирая на значения z-index.
Firefox 2.0 укладывает элементы с отрицательными значениями z-index под фон и рамку элемента, который создал данный уровень упорядочивания. Другими словами он меняет местами пункты 1 и 2 в правилах наслоения.
Css свойство z-index – вся правда › Блог Интернет Технологий
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 ни в какую не хочет отображать элемент <select> ЗА каким-либо другим элементом. Даже при использовании z-index, все равно <select> отображается поверх всего. На данный момент мне известно всего два варианта решения: с использованием iframe и с использованием javascript.
С использованием iframe:
<div>
<IFRAME scrolling="no" frameborder="0"></IFRAME>
Текст блока
</div>
<select name="nameSelect">
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
</select>
При помощи javascript:
Я не буду показывать вам пример, потому что реализация довольно таки простая и действенная. Вы просто прячьте элемент <select> (например display:none) когда блок, который должен отображаться поверх, появляется на странице. Такое решение подойдет для реализации выпадающего меню и popup.
Firefox 2: Что такое отрицательное значение? Аа?
Вот ведь. А firefox 2 тоже имеет свой недостаток. Хоть его и убрали с поддержки со стороны разработчиков, все же напомню, что forefox 2 не работает с отрицательными значениями z-index и ничего с этим поделать нельзя.
Ну вот. Такое страшное и неведанное css свойство z-index кажется таким простым. Надеюсь, я ничего не упустил. Если вам известны еще какие-то проблемы с z-index, милости прошу в комментарии, потому что я в своей практике с другими не встречался.
Вдохновил Louis Lazaris.