Огромный 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.
Маленькие циферки, дополнительные классы