Огромный z-index и перекрывание элементов

Про необдуманные z-index, как он выстреливает в проектах и что с этим делать.

Часто встречаю в проектах, когда в условном дропдауне прописывают гигантский z-index:

.dropdown {
    z-index: 9999;
}

Потом появляется тултип, туда тоже заряжаем z-index:

.tooltip {
    z-index: 1111;
}

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

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

А все почему? Потому что изначально непонятно, какой должен быть уровень у элементов. Мы от балды заряжаем z-index, а через годик происходит выстрел.

Что делать

Во-первых, надо уменьшить циферки.

Например, мы сначала сделали тултип с z-index: 1, потом дропдаун с z-index: 2. Уже здесь видно, что тултип должен быть выше дропдауна, поэтому меняем циферки.

Маленькие цифры нагляднее. Когда бежишь по коду и видишь 9999, то подсознание говорит: «это какая-то большая цифра». Часто здесь пропускают бажки.

Это не решение проблемы перекрывания, скорее просто архитектурное. Тут лучше всего сесть с дизайнером и обсудить, кто кого будет перекрывать и поставить правильные циферки.

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

Однажды, вы наткнетесь на конфликты z-index между элементами. Когда в одном месте тост должен перекрывать модальное окно, а в другом месте модальное окно должно перекрывать тост.

Вот тут спасут классы. Навесил особый класс → переопределил z-index.

Маленькие циферки, дополнительные классы