Почему z index не работает
Перейти к содержимому

Почему z index не работает

  • автор:

CSS свойство z-index не работает

Я задал родителю значение свойства positon: static; для дочернего допустим menu1 и logo поставил absolute. и разные z-index. и все равно они как бы находятся на одной плоскости, а не как обещано с z-index в разных.

Отслеживать

задан 25 фев 2013 в 13:36

315 3 3 золотых знака 8 8 серебряных знаков 23 23 бронзовых знака

Как они могу быть на одной плоскости если у них разные z-index? Тем более что их position: absolute вынесло из нормального потока. jsfiddle.net/dCtnX

Z-index: наслаивание элементов

Позиционированные элементы можно наслаивать друг на друга при помощи 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-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 :

CSS z-index

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

Свойство z-index

В завершение

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

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

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

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

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

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

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

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

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

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

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 . Элемент с абсолютным позиционированием не будет изменять своего положения, поскольку он привязан к своему родительскому элементу.

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

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

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

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

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

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

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

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

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

Пример для position: sticky c использованием top: 0 и bottom: 0 для залипания элементов по середине.

Почему не работает z-index?

Почему не работает z-index у .sub-menu1?
Нужно, чтобы меню выезжало из под header.

.container < width: 1140px; margin: 0 auto; >.clearfix::after < content: ""; display: table; clear: both; >.header < width: 100%; height: 108px; background-color: #262626; margin: 0; position: relative; z-index: 1; >.logo < width: 143px; height: 100%; float: left; background: url("logo.png") no-repeat 50% 50%; >.menu-right < width: 143px; height: 100%; float: right; line-height: 108px; text-align: center; >.menu-center < height: 100%; margin-left: 153px; line-height: 108px; padding-left: 89px; >.submenu1 < display: block; width: 100%; height: 80px; background-color: grey; overflow: hidden; position: absolute; left: 0; top: 28px; transition: 1s; z-index: 100; >.men1:hover + .submenu1
  • Вопрос задан более трёх лет назад
  • 15982 просмотра

1 комментарий

Оценить 1 комментарий

Твой код: https://jsfiddle.net/vbn3hp5w/
А что должно было быть?
Решения вопроса 0
Ответы на вопрос 2

Сделайте одинаковый position у header и submenu1.
Было похожая проблема, решил, поставив одинаковое значение свойства position.

Ответ написан более трёх лет назад
Нравится 6 1 комментарий
Ты меня просто выручил!
devstudent @devstudent
frontend-developer

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

Ответ написан более трёх лет назад
Нравится 2 6 комментариев
алексей @tolval Автор вопроса

Но если вынести из родителя, то как его через hover на ссылку в меню зацепить?
Вывел div после header, но он все-равно перекрывает.

devstudent @devstudent

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

алексей @tolval Автор вопроса

devstudent: По поводу самой меню наверное и правда придется другими методами. Но почему перекрывает все-равно не пойму. Поставил div вообще отдельно, то есть у него родитель общий с хидером, поставил всем блокам в хидере z-index: 1 и relative. И без толку, не реагирует.

devstudent @devstudent

ну если див ВНЕ хидера, то поставьте ему z-индекс ВЫШЕ чем у хидера. какой смысл ставить одинаковые z-index: 1 тогда. тогда выше будет тот элемент, чкто ниже в дереве DOM.

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

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