Как правильно написать алгоритм переключения z-index?

Question

[Destell]

Ссылка
Немножко говнокода.

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

Была мысль сделать проверку на блок выше и работать с z-index относительно этого, но это кажется довольно перегруженным.

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

Comments

[Дмитрий Евграфович]

в 21 строке поставьте 0 вместо _timeout

[Destell]

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

[Дмитрий Евграфович]

Destell, тогда добавляйте при клике active класс сначала и для потомков элемента с этим классом сделайте нужный z-index

Answer 1

[Сергей delphinpro]

По-моему, здесь оптимальным будет вариант выноса выпадашек в самый внешний контекст (в боди), позиционирование под плашкой джаваскриптом, и соответственно единый для них zindex, поверх всего.

Answer 2

[Петр Васильев]

А можно ли сделать следующие глубины ?
Для нормальной карточки 100
Для зеленой выпадашки 200
Для активной карточки 300

При переключении с одной активной на другую для бывшей активной ставить обратно 100, после окончания анимации заезда зеленой выпадашки

Comments

[Destell]

Ссылка
Проблема та же - при клике на каждый ниже находящийся блок, тот перекрывает зеленую менюшку, которая не успевает уползти под родителя

[Петр Васильев]

Destell, я же пишу дожидайтесь в скрипте, когда анимация зеленой плашки кончится. В крайнем случае через settimeout

[Destell]

Петр Васильев, а, пардон, заработался, пропустил. Спасибо, попробую.

Answer 3

[profesor08]

Сначала задавай z-index, потом анимируй.

Answer 4

[Евгений]

z-index кстати тоже можно анимировать

Comments

[Destell]

У z-index transition работает "ступенчато", а не плавно, если вы про это