необьяснимый z-index

[Mixail.09]

Здравствуйте.
Разъясните пожалуйста свойства z-index.

Как то не логично он себя ведет в комплекте с :before и :after

http://codepen.io/mikhail09/pen/WrYvdb Почему желтые квадраты сверху вопреки z-index?

если убрать з-индекс у дива и прописать в after z-indez: -1; все отображается как надо?

http://codepen.io/mikhail09/pen/KVrpez

[rus]

position: absolute; и z-index:...; не работают в паре!

[Igor Schnaider]

position: absolute; и z-index:...; не работают в паре!

В смысле не работают?

[rus]

в том смысле что нужно использовать что-то одно.

[Igor Schnaider]

Почему?

[hypnocolor]

http://codepen.io/mikhail09/pen/WrYvdb Почему желтые квадраты сверху вопреки z-index?

 

:after и :before — это части контента блока. Контент ведь у вас визуально поверх блока расположен? Вот и с псевдоэлементами (жёлтыми квадратами) в вашем случае то же самое.

 

position: absolute; и z-index:...; не работают в паре!

 

Чё это? z-index отлично со всеми позишнами работает, кроме static.

[rus]

ссори, чет я перепутал походу

наоборот, они вместе работают...

Чё это? z-index отлично со всеми позишнами работает, кроме static.

просто была тут как-то темка очень похожая, но походу память подвела меня

[by chris]

Почему желтые квадраты сверху вопреки z-index?

Если вы зададите желтым квадратам z-index равным нулю, то они будут иметь в итоге z-index: 0.0, а не 0. И соревноваться в стакинге он сможет только с псевдоэлементом ::before родительского элемента.

[Igor Schnaider]

z-index: 0.0, а не 0

 

Еще что-то новое :-)

[wwt]

просто была тут как-то темка очень похожая, но походу память подвела меня

думал про float, сказал про z-index =)

[Mixail.09]

 

http://codepen.io/mikhail09/pen/WrYvdb Почему желтые квадраты сверху вопреки z-index?

 

:after и :before — это части контента блока. Контент ведь у вас визуально поверх блока расположен? Вот и с псевдоэлементами (жёлтыми квадратами) в вашем случае то же самое.

 

Ну ок, пусть так. Так весь прикол то в том что

1) если вообще нет z-index то псевдоэлемент оказывается сверху (это понятно)

2) если установлю псевдоэлементу (желтым квадратам) z-index 1, а основному блоку (в данном случае это серые квадраты) z-nidex 2 (да хоть 999) то он все равно будет снизу, хотя его зиндекс больше (и где тут логика?! не спорю что она наверняка есть просто ее нужно понять)

3) и совсем уж то что мозг взрывает (по крайней мере мне) если псевдоэлементу (желтым квадратам) z-index ставлю -1, а основной блок  (серые квадраты) вообще оставляю без з-индекса, каким то чудом псевдоэдемент оказывается внизу!!! 

 

Кто нибудь может объяснить данный эффект? Реально какая то неразбериха  и я так понял не только у меня одного

[Igor Schnaider]

и где тут логика?!

Логика в том, что есть такое понятие, как контекст наложения (stacking context).

Можно сравнить со столом и предметами на нем. Стол - это ваш родитель. Предметы - псевдоэлементы. На какой бы этаж вы не подняли стол (z-index: 2 в вашем случае), предметы все равно будут сверху, потому что стол для них - это база.

 

 

 

и совсем уж то что мозг взрывает (по крайней мере мне) если псевдоэлементу (желтым квадратам) z-index ставлю -1, а основной блок (серые квадраты) вообще оставляю без з-индекса, каким то чудом псевдоэдемент оказывается внизу!!!

Потому что position, отличное от static, вместе с z-index, отличным от auto, создают новый stacking context. Изначально он был на их общем родителе. Ну и еще есть несколько правил, которые создают его. Например, filter. Тут можете посмотреть.

Edited February 9, 2016 by Igor Schnaider

[Mixail.09]

 

и где тут логика?!

Логика в том, что есть такое понятие, как контекст наложения (stacking context).

Можно сравнить со столом и предметами на нем. Стол - это ваш родитель. Предметы - псевдоэлементы. На какой бы этаж вы не подняли стол (z-index: 2 в вашем случае), предметы все равно будут сверху, потому что стол для них - это база.

 

Супер! Отлично объяснили, спасибо!

А для отрицательного з-индекса тогда получается другие правила действуют? Возьмем ваш пример и зададим предмету на столе отрицательный з-индекс, он предсказуемо переместится под стол, но стоит к столу применить з-индекс (положительный, да и вообще любой) предмет снова оказывается на столе. 

[Igor Schnaider]

но стоит к столу применить з-индекс (положительный, да и вообще любой) предмет снова оказывается на столе.

Ну вот потому что этот stacking context сместился с родителя (в данном случае html) на этот стол. Теперь позиционирование по z-оси будет начинаться от него.

[Mixail.09]

 

но стоит к столу применить з-индекс (положительный, да и вообще любой) предмет снова оказывается на столе.

Ну вот потому что этот stacking context сместился с родителя (в данном случае html) на этот стол. Теперь позиционирование по z-оси будет начинаться от него.

 

Спасибо! 

Буду учить матчасть 

[Launder]

Вот статья по-поводу z-index мне понравилась. Ну и темка была.

[Mixail.09]

Вот статья по-поводу z-index мне понравилась. Ну и темка была.

Вы в итоге разобрались с контекстами наложения? Просто вроде все понятно, но все равно какой то сумбур в голове. Надеюсь пройдет со временем и опытом.

За статью спасибо - полезная, наверное одна из лучших на русском языке

[Launder]

 

Вот статья по-поводу z-index мне понравилась. Ну и темка была.

Вы в итоге разобрались с контекстами наложения? Просто вроде все понятно, но все равно какой то сумбур в голове. Надеюсь пройдет со временем и опытом.

За статью спасибо - полезная, наверное одна из лучших на русском языке

 

 

Спасибо за интерес - да, более-менее разобрался. Ссылку на тему думал давать или нет, но решил всё же дать, хотя я и не уверен что стоит вникать во все написанные там рассуждения, но может что-то окажется полезным...

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

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

Поэтому задачу нужно свести, так или иначе, к добавлению z-index'ов различным дочерним элементам. Тогда, участвуя в одном контексте наложения, они позиционируются в одной z-плоскости, в соответствии со своими значениями. Если же у родителя нет подходящего дочернего элемента, которому бы он мог "доверить" перекрытие другого дочернего элемента, то можно использовать, например, псевдоэлемент, которому назначаются все необходимые свойства, например блочный статус, размер равный размеру родителя и так далее,  и присваивается нужный z-index. Псевдоэлемент будет иметь статус дочернего по отношению к своему родительскому элементу и сможет участвовать в позиционировании на z-плоскости, на ряду с другими дочерними элементами.

Edited February 11, 2016 by Launder

[Mixail.09]

Спасибо, пока писал пример разобрался с z-indexom))) по крайней мере с его частью не касающейся opacity

 

 поскольку все его дочернии элементы будут выше него и прямого способа расположить какой-либо из них ниже я не знаю

Абсолютно согласен с вами в этом вопросе (может есть какой способ? кто знает?)

 

 

 в 1-ом примере дочерний ниже родителя, но как уже говорилось тот родитель не формирует свой контент наложения.

как только задаем ему z-index отличный от auto (даже 0), формируется новый контент наложения и новый порядок слоев, в данном случае ФОН РОДИТЕЛЯ => ФОН ДОЧЕРНЕГО => ТЕКСТ РОДИТЕЛЯ

http://codepen.io/anon/pen/bEzNMY

[Launder]

ФОН РОДИТЕЛЯ => ФОН ДОЧЕРНЕГО => ТЕКСТ РОДИТЕЛЯ

 

Да, кстати, про строчное содержимое. Получается интересно.

 

В первом Вашем примере мы задаём z-index: -1 потомку, и он становится ниже родителя, поскольку оба лежат в корневом стековом контексте.

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

Однако тут обнаруживается интересный нюанс: оказывается, если у потомка z-index отрицательный, то он располагается НИЖЕ текстового содержимого предка.

Мне стало интересно, а как же ведут себя z-index'ы для текстовых содержимых?

Немного модифицировал Вашу иллюстрацию:

 

https://jsfiddle.net/L2tw2rut/1/

 

родительское блочное содержимое - серое, дочернее блочное содержимое - жёлтое.

родительское строчное содержимое - оранжевое, дочернее строчное содержимое - фиолетовое.

 

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

А во втором примере родитель сам формирует контекст наложения, а значит дочерний элемент уже лежит в его контексте наложения.

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

Это можно объяснить через корневой элемент. Каким бы не был z-index, всё равно элемент располагается выше корневого стекового контекста, по-умолчанию, насколько я понимаю, заданного тегом <body>. Однако если z-index отрицательный, то все строчные элементы будут его выше. Блочные элементы могут быть или выше или ниже в зависимости от того z-index их больше или меньше. По-умолчанию, все они лежат в корневом стековом контексте тега <body> и конкурируют между собой в соответствии с правилами расположения в z-плоскости. Корневой элемент нового стекового контекста, это как тег <body> для документа в целом, новое "дно стакана". Поэтому сам он всегда ниже других блочных элементов, лежащих в его стековом контексте, каким бы ни был их z-index, но его строчное содержимое ведёт себя, по отношению к нему, как его дочерний элемент. И, соответственно, располагаются, в соответствии с правилами для одного распложения элементов на z-плоскости, а они таковы: строчные элементы выше любых блочных элементов из потока, а также плавающих элементов, но ниже любых позиционированных элементов, z-index которых больше или равен нулю. А поскольку родитель хоть и спозионирован, и хоть его z-index равен нулю, но он является корневым элементом этого стекового контекста, и строчное содержимое, лежащее в нём, его как бы не видит, оно буд-то находится в теге <body>, ниже которого ничего быть не может, и конкурировать строчные элементы могут только с другими дочерними элементами того же стекового контекста, родитель же у нас "дно стакана" этого стеквого контекста. А в "стакане" у нас, помимо строчного содержимого, есть только блочный элемент <div class=".affiliate-2">, у которого z-index отрицательный, а значит текстовое содержимое располагается выше него. Если бы <div class=".affiliate-2"> z-index был больше или равен нулю, то он бы перекрыл текстовое содержимое родительского элемента, в соответствии с правилами позиционирования на z-плоскости.

И, наконец, как располагаются строчные элементы разных стековых контекстов, друг относительно друга?

родительский элемент создаёт новый стековый контекст, и, в некотором роде, он является <body> для своих потомков. Поэтому он располагается ниже всего, он - дно стакана этого контекста форматирования.

Далее следует его дочерний блочный элемент, создающий новый контекст форматирования. Для своих потомков он также дно стакана.

Далее следует строчное содержимое потомка.

И, только на самом верху, лежит строчное содержимое предка. Почему так? Потому что строчное содержимое потомка, лежит в "стакане" z-index которого отрицательный. А текстовое содержимое предка лежит в корневом "стакане". Соответственно текстовое содержимое корневого стакана конкурирует с блоком, также лежащим в корневом стакане. А поскольку z-index у этого блока отрицательной, то и он сам и всё его содержимое располагаются ниже текстового содержимого родителя.

Это как в первом примере. Только в первом примере, отсчёт ведётся от корневого контекста форматирования, а в нашем случае отсчёт ведётся от родительского блока образующего новый контекст форматирования. И в нём всё содержимое блока с отрицательным z-index располагается ниже блоков идущих в основном потоке документа, и, тем более, текстового содержимого этих блоков. Если же у дочернего блока z-index был бы больше или равен нулю, то он уже располагался бы выше и блочного и строчного содержимого и всё что находится внутри него располагалось бы выше. Даже если бы у этого содержимого был отрицательный z-index - поскольку он лежал бы в "стакане", который расположен выше.

Итак, сначала идёт конкуренция в корневом стековом контексте, далее в выигравшем стековом контексте происходит своя конкуренция и сначала показываются все слои выигравшего стекового контекста, далее слои стекового контекста, который занял второе место и так далее, до корневого стекового контекста документа, это то дно стакана, где расположены все другие стаканы. Главное, выбрать нужные стаканы :-)

PS: если б мы не дали бы тегам span фон, то он, по умолчанию, был бы прозрачным, а поскольку буквы занимают далеко не всю поверхность, то через буквы просвечивали бы буквы расположенные ниже. Просто нужно это учитывать.

Edited February 12, 2016 by Launder

[Launder]

 поскольку все его дочернии элементы будут выше него и прямого способа расположить какой-либо из них ниже я не знаю

Абсолютно согласен с вами в этом вопросе (может есть какой способ? кто знает?)

 

Да, кстати :-) Присоединяюсь к вопросу!