menumenu_open <!— xhtml.ru —>

Как работает z-index

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

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

Позиционирование и взаимное расположение

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

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

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

Посмотрите, как это выглядит:

See this code Positioning and Stacking Order on x.xhtml.ru.

z-index для html-элемента

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

  • Позиционированные элементы с положительными значениями z-index размещаются выше не позиционированных элементов.
  • Позиционированные элементы с отрицательным значениями z-index размещаются ниже не позиционированных элементов.

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

Следует обратить внимание ещё на два ключевых момента:

  • Фиксированные значения. Хотя вы можете использовать любое число для z-index, попробуйте использовать фиксированный набор значений, например: 0, 10, 20, 30, 40. Аналогично для отрицательных значений.
  • Порядок — если два элемента имеют одинаковый z-index, то, выше окажется тот элемент, который в потоке (в исходном коде) следует позже.

А теперь самое интересное. Поиграйтесь с html-элементами div в песочнице ниже. Измените порядок наложения, меняя порядок следования элементов в потоке и/или z-index. Элемент с абсолютным позиционированием не будет изменять своего положения, поскольку он привязан к своему родительскому элементу.

See this code position: absolute playground on x.xhtml.ru.

Контекст размещения

Допустим, у нас есть вот такой html-код с позиционированными элементами.

<body>
  <div id="div1" style="position:relative; z-index:10" />
  <div id="div2" style="position:relative; z-index:5">
    <div id="div3" style="position:absolute; z-index:100" />
  </div>
</body>

Будет ли элемент div3 размещен над элементом div1, из-за более высокого z-index? Ответ — нет. Сначала это может показаться странным, но все сводится к тому, как сгруппированы html-элементы.

Обратите внимание, что div1 — это отдельный элемент, и он образует группу из единственного элемента. div2 образует группу с div2 (родитель) и div3 (дочерний элемент). Позиционированный элемент формирует контекст наложения. Позиционируемый элемент может быть либо одиночным элементом (или) родительским элементом с дочерними элементами.

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

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

<body>
  <div id="div1" style="position:relative; z-index:10" />
  <div id="div2" style="position:relative; z-index:5">
    <div id="div3" style="position:absolute; z-index:100" />
    <div id="div4" style="position:absolute; z-index:50" />
  </div>
</body>

В таком контексте дочерние элементы будут располагаться в следующем порядке:

  • Позиционированные элементы с отрицательными значениями z-index
  • Непозиционированные элементы — со значением position:static
  • Позиционированные элементы с неустановленным значением z-index или z-index:auto
  • Позиционированные элементы с положительными значениями z-index

Посмотрите ниже, здесь несколько элементов и контекстов наложения. Обратите внимание, что div4, div5 и div6 дочерние элементы по отношению к div3.

See this code position: absolute playground on x.xhtml.ru.