Как правильно задать z-index слоям?

Question

[Михаил Р.]

Приветствую!

Пытаюсь разобраться в логике работы z-index, пока не получается...

Набросал несколько слоев, задача следующая: .alerts должен быть под .content, но .alerts__alert (.alerts -> .alerts__alert) должен быть над .content.
Собственно, по указанным z-index, наложение слоев должно быть понятно более наглядно.


В итоге, .alerts__alert находится под .content, хотя z-index у него больше... Как быть?

Спасибо!

Comments

[Одиночка Айс]

так не сработает, вынесите .alerts__alert вне .alerts, либо по событию поднимайте z-index .alerts, добавляя какой-нибудь класс.

[Михаил Р.]

Одиночка Айс, вся проблема в том, что .alerts должен всегда находится под .content, а .alerts__alert наоборот, над .content ... При этом, желательно сохранить структуру блоков html...

[Одиночка Айс]

Mike Ro, это невозможно, .alerts является родителем .alert__alert и поэтому последний не может прыгнуть выше объекта, у которого z-index выше .alerts

[Михаил Р.]

Одиночка Айс, понял, спасибо! Отпишите, как ответ - выберу решением...

Answer 1

[Одиночка Айс]

Как вы хотите не сработает, .alerts является родителем .alert__alert и поэтому последний не может прыгнуть выше объекта, у которого z-index выше .alerts.
Вынесите .alerts__alert вне .alerts, либо по событию поднимайте z-index .alerts, добавляя какой-нибудь класс.