Мобильная версияПочему z-index не работает в анимированном раскрывающемся меню? ⇐ CSS
-
Anonymous
Почему z-index не работает в анимированном раскрывающемся меню?
Итак, я разрабатываю приложение Next.js с Next.js, системой счисления и движением кадра. Я уже создал панель навигации с мобильным адаптивным меню, анимированную с помощью движения кадра и абсолютно позиционированную. Проблема в том, что он не охватывает содержимое моей страницы должным образом. Z-index почему-то не работает. Я думаю, это из-за тем пользовательского интерфейса с основанием системы счисления, которые устанавливают z-индекс по умолчанию равным нулю, но я не знаю, как это может помочь мне в решении этой проблемы.
Вот код NavBar:
// NavBar.tsx экспортировать функцию по умолчанию NavBar() { const [isOpen, setOpen] = useState(false); возвращаться ( {/* Бурение аварийной опоры с использованием композиции компонентов */} ); } А NavMenu выглядит так:
{открыт && ( {navigation.map((navLink) => ( {navLink.label ))} )} Также стоит отметить, что я обернул весь свой код (NavBar и mainPage с обычным текстом внутри) темами пользовательского интерфейса счисления. Используя инструменты разработчика Chrome, я увидел, что он устанавливает для себя z-index: 0.
Я пробовал устанавливать огромные значения z-index. Кроме того, я попытался переместить NavMenu за пределы NavLogo. Пробовал использовать огромные отрицательные значения на главной странице. Я также попробовал установить индекс z-index по системе счисления на 1. Ничего не помогло.
Итак, я разрабатываю приложение Next.js с Next.js, системой счисления и движением кадра. Я уже создал панель навигации с мобильным адаптивным меню, анимированную с помощью движения кадра и абсолютно позиционированную. Проблема в том, что он не охватывает содержимое моей страницы должным образом. Z-index почему-то не работает. Я думаю, это из-за тем пользовательского интерфейса с основанием системы счисления, которые устанавливают z-индекс по умолчанию равным нулю, но я не знаю, как это может помочь мне в решении этой проблемы.
Вот код NavBar:
// NavBar.tsx экспортировать функцию по умолчанию NavBar() { const [isOpen, setOpen] = useState(false); возвращаться ( {/* Бурение аварийной опоры с использованием композиции компонентов */} ); } А NavMenu выглядит так:
{открыт && ( {navigation.map((navLink) => ( {navLink.label ))} )} Также стоит отметить, что я обернул весь свой код (NavBar и mainPage с обычным текстом внутри) темами пользовательского интерфейса счисления. Используя инструменты разработчика Chrome, я увидел, что он устанавливает для себя z-index: 0.
Я пробовал устанавливать огромные значения z-index. Кроме того, я попытался переместить NavMenu за пределы NavLogo. Пробовал использовать огромные отрицательные значения на главной странице. Я также попробовал установить индекс z-index по системе счисления на 1. Ничего не помогло.
