Обработка перехода на абсолютно позиционный элемент, нажимающий другие элементы
У меня есть отзывчивая навигация, которая расширяется до содержимого ниже. Даже с position: absolute, когда происходит переход, он по-прежнему проталкивает нижний контент. Проблема с переходом.
Моя идея решить эту проблему заключалась в том, чтобы добавить класс к нижнему содержимому всякий раз, когда нажимается панель навигации. Это на мгновение добавит абсолютное позиционирование ко всему нижнему содержимому, чтобы оно не мешало раскрывающемуся списку.
Помимо всей сложности, которую это потребует, я использую реакцию и реакцию-загрузку и этот падать, последний в списке. У этого события нет onTransitionEnd, поэтому я не знаю, как удалить этот добавленный класс после его добавления. Я думал, что после того, как выпадающее меню закончится, но без этого события не знаю, как это сделать.
Это простая проблема, но я не знаю, как ее исправить, не переписывая код. Я попытался изменить положение нижнего содержимого, но независимо от того, что я делаю, раскрывающийся список попадает в него или его поля. Некоторые решения говорят, что z-index должен решить, но это не сработало.
Если нет решения, я рад услышать способы редизайна.
Я сделал демо с проблемой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот немного, чтобы направить вас по правильному пути:
.top-navbar {
align-self: flex-end;
height: 4em;
max-width: 100px;
width: 100px;
}
.navbar-nav {
/*position: absolute;*/
background-color: red;
}
Осталось сделать так, чтобы кнопка не качалась вверх/вниз, что не должно быть слишком сложно понять.