Предотвращение наложения карты vue2-листовки поверх панели навигации Vuetify

Question

Я использую Vuetify для создания приложения, которое отображает местные достопримечательности. Приложение использует vue2-листовку для отображения карт. К сожалению, карта высовывается из навигационных ящиков, диалогов и более темных наложений экрана. Вот изображения, демонстрирующие это:

Как это исправить?

Answer 1

Это проблема z-index. Попробуйте добавить следующее к своему CSS:

.v-navigation-drawer--temporary {
    z-index: 1001;
}

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

ПРИМЕЧАНИЕ: Это решение работает только для навигационных ящиков. Возможно, вам придется настроить значения z-index в пользовательском CSS отдельно для других типов компонентов, таких как диалоговые окна. В качестве альтернативы, вы можете найти, где z-index установлен в буклете CSS, и изменить его вместо этого. Я более знаком с Vuetify, так что это то, что я подправил.