Почему не срабатывает отрицательный z-index?

Question

[RealBoy211]

Почему не срабатывает отрицательный z-index, если родителю тоже присвоен, причём неважно, положительный или отрицательный?


css

Comments

[ajderha]

А он точно не срабатывает? Родитель же полупрозрачный. В hsla 0.5 замени на 1 и скинь скрин

[RealBoy211]

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

В вопросе есть ссылка на Codepen.

[Ankhena]

https://qna.habr.com/q/1067080

[RealBoy211]

Ankhena, спасибо, я знаю о контексте наложения, однако мне это не помогло в решении проблемы.

[Ankhena]

RealBoy211,

я знаю о контексте наложения, однако мне это не помогло в решении проблемы

Видимо, не совсем.
Знания о контексте наложения полностью отвечают на ваш вопрос "Почему?".
Отрицательный для дочернего не срабатывает именно потому что у родителя relative и z-index 1.

Возможно, задача-то совсем не в том, что вы сформулировали?

И могу повторить тоже самое, что написала в том вопросе: гридами аналогичные задачи решаются в основном легче.

Answer 1

[Алексей Дубровин]

У вас всё правильно работает
1) Вы создали контейнер и присвоили ему z-index:1;
2) У него есть дочерний элемент с z-index:-10;
КОНТЕЙНЕРЫ обозначают области взаимодействия.
Дочерний элемент относительно родительского стоит в z-index -10
Дочерний контейнер является неотъемлемый частью родителя. Он не может выйти за его стенку.(что вы пытаетесь реализовать)
Вынесите дочерний элемент из контейнера и у вас всё заработает.

Comments

[RealBoy211]

Я полностью согласен, но меня смущает момент, когда мы вообще убираем z-index у родительского блока. В таком случае дочерний элемент выходит за стенки родительского, хотя казалось бы, "неотъемлемая часть".

Поясните, пожалуйста, этот момент.

[Алексей Дубровин]

RealBoy211,
В коментах скинули ссылку на ответ.
А там ссылка на статью https://habr.com/ru/post/166435/?_ga=2.191552236.7...