Что такое z index: Свойство z-index: детальный обзор | CSS-Tricks по-русски – То, что вам никто не говорил о z-index / Habr

Как использовать свойство CSS z-index для 3D

Мощное свойство CSS z-index

От автора: в этой статье вы узнаете, как использовать свойство CSS z-index… Единственный способ проникнуть в 3-е измерение с помощью CSS!

В большинстве случаев, когда вы стилизуете вещи с помощью CSS, это происходит в 2D плоскости. Элементы HTML размещаются на странице горизонтально / вертикально, как стекируемые блоки в тетрисе. z-index изменяет эту парадигму и дает возможность определить визуальную иерархию на 3 плоскости: Z-оси.

Мощное свойство CSS z-index

В этом фрагменте кода #navbar будет перекрывать #footer (если их позиция совпадает), потому что у него более высокий z-индекс.

Мощное свойство CSS z-index

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

Изучите курс и узнайте, как верстать современные сайты на 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;

}

Мощное свойство CSS z-index

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

Изучите курс и узнайте, как верстать современные сайты на 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.

Мощное свойство CSS z-index

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

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

Узнать подробнее Мощное свойство CSS z-index

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.

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

  1. Пунктирная рамка внутри блока
  2. Красивая тень блока на CSS

z-index и opacity

opacity меньше 1 рассматриваются как z-index: 0;. Если дополнительно задать position не static и z-index не auto, то положение измениться в соответствии с последними свойствами CSS.

Новый контекст наложения создаётся для элементов
  1. <body>
  2. с z-index не auto и position, отличным от static
  3. opacity меньше 1
  4. transform не none
  5. will-change
  6. и т.д. (здесь указан список)

Советы по использованию свойства z-index

  1. Если можно не использовать z-index, то лучше его не использовать и, например, сразу в HTML коде разместить теги в требуемом порядке.
  2. Если z-index всё же нужен, скажем, для выпадающего меню, то значений 0, 1, 2, 3, 4, 5 вполне достаточно в большинстве случаев, не нужно переходить на десятки, а то и сотни.
  3. Если 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):

  1. Свойство z-index служит для упорядочивания позиционированных элементов.
  2. Каждый элемент с z-index не равным auto создает новый уровень упорядочивания, относительно которого оно (упорядочивание) и происходит для всех его потомков (естественно потомки, у которых z-index не равно auto создают уже свой уровень упорядочивания). Именно поэтому, например, элемент из одного уровня упорядочивания невозможно «положить» между двумя элементами из другого.
  3. Корневой элемент <HTML> создает корневой уровень упорядочивания, даже, если у него не указан z-index.

Давайте рассмотрим такой пример:

<body>
 <div>
  <div>
   <div>
    DIV3
   </div>
   <div>
    DIV4
   </div>
  </div>
 </div>
</body>

В этом примере при любых числовых значениях z-index у вас получится поменять местами только DIV3 и DIV4. А вот не получится следующее:

  1. Не получится положить DIV3 и DIV4 под DIV2, так как они находятся на разных уровнях упорядочивания. DIV2 на уровне созданном элементом DIV1, а DIV3 и DIV4 на уровне созданном DIV2. Чтобы они были на одном уровне надо убрать z-index у DIV2 или установить его в auto.
  2. Не получится положить DIV2 под DIV1. Чтобы получилось надо установить auto уже у DIV1.
  3. И так далее...

В разных учебниках и справочниках понятие «Уровень упорядочивания» называют по разному — локальный позиционный контекст, локальный контекст стека и т.д. В официальной спецификации CSS оно пишется так — «local stacking context». Но на мой взгляд словосочетание «уровень упорядочивания» ближе к пониманию для большинства русскоговорящих людей, поэтому я и ввел это определение.

Тип свойства

Назначение: позиционирование.

Применяется: к элементам с position отличным от static.

Наследуется: нет.

Значения

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

  • Число — любое целое положительное или отрицательное число, задающее порядок элементов внутри данного уровня упорядочивания. Элемент с бОльшим значением будет расположен поверх тех, у которых оно меньше. Если у двух элементов имеются одинаковые значения, то сверху будет тот, который находится ниже в HTML-коде. Кроме этого, элемент, имеющий числовое значение (в том числе и 0) создает новый уровень упорядочивания для своих позиционированных потомков.
  • auto — при этом значении у элемента в текущем уровне упорядочивания такой же z-index, как и у его предка, который этот уровень создал. При этом сам элемент не создает новый уровень упорядочивания для своих потомков. Если есть несколько элементов с данным значением, то сверху будет тот, который стоит ниже в HTML-коде страницы.
  • inherit — наследует значение z-index от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

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

  1. Первым слоем укладывается фон и рамка элемента, который создал данный уровень упорядочивания.
  2. Сверху, вторым слоем, укладываются элементы-потомки, имеющие отрицательные значения z-index, где выше оказывается элемент со значением ближе к нулю.
  3. Следующим слоем идут элементы-потомки, которые не являются встроенными (inline).
  4. Четвертым слоем идут плавающие элементы (float) вместе со своим содержимым.
  5. Пятый слой — это встроенные элементы-потомки.
  6. Шестым слоем укладываются элементы с z-index auto или 0, где выше оказывается элемент стоящий ниже в коде.
  7. И, наконец, на самом верху располагаются элементы с положительными значениями 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 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.03.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, определяет ряд факторов. Далее предоставлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу:

  1. Фон и рамка элемента, создающие контекст стека
  2. Элементы с отрицательным контекстом стека, в порядке появления
  3. Не позиционированные, не плавающие, блочные элементы, в порядке появления
  4. Не позиционированные, плавающие элементы, в порядке появления
  5. Строчные элементы, в порядке появления
  6. Позиционированные элементы, в порядке появления

Этим трем блокам не назначен 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.

С уважением, Vasilenko Ivan!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *