z-index | CSS

• z-index не работает с position: static;. Значения relative, absolute и fixed равнозначны
• Если у соседних элементов одинаковое значение z-index, то нижние в коде теги показаны над верхними
• У дочернего элемента родителя, имеющего z-index не auto и position, отличный от static, z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым
• Отрицательный z-index перемещает элемент перед background, border, box-shadow контекста наложения
• z-index и opacity
• Советы по использованию свойства z-index
• position: static; и position: relative;
• position: absolute;
• position: fixed;

Чем больше значение 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; static relative absolute fixed

z-index: 1; static relative absolute fixed

<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 class="raz0">
  <div>z-index: 2;</div>
  <div>z-index: 1;</div>
</div>

Если у соседних элементов одинаковое значение z-index, то нижние в коде теги показаны над верхними

[Пример интерактивный, следует переключать кнопки]

• красный:
• синий:
• зелёный:

▼ 0 auto auto 1 auto auto 1 1 1

<style>
div {
  position: relative;
  height: 3em;
  width: 3em;
  color: #fff;
}
div:nth-child(1) {
  top: 2em;
  left: 7em;
  z-index: 0;
  z-index: 1;
  background: red;
}
div:nth-child(2) {
  left: 8em;
  z-index: 1;
  background: blue;
}
div:nth-child(3) {
  top: -2em;
  left: 6em;
  z-index: 1;
  background: green;
}
</style>

<div>красный</div>
<div>синий</div>
<div>зелёный</div>

У дочернего элемента родителя, имеющего z-index не auto и position, отличный от static, z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым

• красный:
• синий:
• зелёный:

▼ auto:auto 0:10 auto:auto 1:10 auto:5 1:10

10

<style>
div, span {
  height: 3em;
  width: 3em;
  color: #fff;
}
div:nth-child(1) {
  background: DarkRed;
}
div:nth-child(2) {
  position: relative;
  z-index: 0;
  position: relative;
  z-index: 1;
  background: DarkBlue;
}
div:nth-child(3) {
  background: DarkGreen;
}
span {
  position: relative;
  display: inline-block;
}
div:nth-child(1) span {
  top: 2em;
  left: 7em;
  z-index: 5;
  background: red;
}
div:nth-child(2) span {
  left: 8em;
  z-index: 10;
  background: blue;
}
div:nth-child(3) span {
  top: -2em;
  left: 6em;
  background: green;
}
</style>

<div>тёмно-красный <span>красный</span></div>
<div>тёмно-синий <span>синий</span></div>
<div>тёмно-зелёный <span>зелёный</span></div>

Отрицательный z-index перемещает элемент перед background, border, box-shadow контекста наложения

Вложенные элементы отображаются над родителем. Единственный способ поместить дочерний тег ниже родителя — присвоить ему отрицательный z-index.

• контекст наложения:

▼ auto + + auto auto - 0 auto - 0 0 -

<style>
div {   /* первый слой */
  position: relative;
  z-index: 0;
  background: #ffeebf;
  box-shadow: 0 3px 3px rgba(0,0,0,.8);
}
div > div {   /* второй слой */
  position: relative;
  z-index: 10;
  z-index: auto;
  z-index: 0;
  margin: 0 .5em;
  background: #ffdc7f;
}
div div div {   /* третий слой */
  position: absolute;
  z-index: 1;
  top: 130%;
  top: 80%;
  z-index: -1;
  margin: 0 .5em;
  background: #ffba00;
}
</style>

<div>
  первый слой
  <div>второй слой
       <div>третий слой</div>
             второй слой
  </div>
  первый слой
</div>

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

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

z-index и opacity

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

• красный:
• синий:
• зелёный:

▼ auto:auto opacity:10 auto:auto 1:10 auto:5 1:10

10

<style>
div, span {
  height: 3em;
  width: 3em;
  color: #fff;
}
div:nth-child(1) {
  background: DarkRed;
}
div:nth-child(2) {
  position: relative;
  z-index: 1;
  opacity: .6;
  background: DarkBlue;
}
div:nth-child(3) {
  background: DarkGreen;
}
span {
  position: relative;
  display: inline-block;
}
div:nth-child(1) span {
  top: 2em;
  left: 7em;
  z-index: 5;
  background: red;
}
div:nth-child(2) span {
  left: 8em;
  z-index: 10;
  background: blue;
}
div:nth-child(3) span {
  top: -2em;
  left: 6em;
  background: green;
}
</style>

<div>тёмно-красный <span>красный</span></div>
<div>тёмно-синий <span>синий</span></div>
<div>тёмно-зелёный <span>зелёный</span></div>

Новый контекст наложения создаётся для элементов

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 создаёт контекст наложения.