Блог

Заранее спасибо за вашу помощь.
Я обновлю этот пост решением, потому что я думаю, что у некоторых людей может возникнуть такая же проблема, и после некоторого поиска в Интернете я не нашел ответа.

Проблема
Я использую модальный компонент в компоненте, включенном в мое приложение.vue. Все работает, за исключением навигационной панели, потому что, когда я навожу курсор мыши на окно, навигационная панель становится белой и переходит на черный фон модальной.

Вы можете видеть переднюю часть на изображении ниже, когда мышь выключена.
// К сожалению, мне нужно 10 репутаций, чтобы добавить его.

Чтобы исправить это, я много чего перепробовал, но сейчас ничего не работает. Если я удалю z-index: 1 с навигационной панели, проблема будет устранена, но если я добавлю на свой веб-сайт какой-нибудь контент с потрясающим шрифтом, навигационная панель появится позади.

css

 nav {
    display: flex;
    background-color: #FFFFFF;
    height: 50px;
    position: sticky;
    top: 0px;
    z-index: 1;
}
.modal-mask {
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.modal {
    background-color: #FAFAFA;
    display: flex;
    flex-direction: column;
}
  

Приложение.vue

 <template>
  <div id="app">
    <NavBar></NavBar>
    <router-view/>
  </div>
</template>

<script>
  import NavBar from './components/layout/Navbar'
  export default {
    components: {
      NavBar
    },
  }
</script>
  

Модальный

 <template>
        <div class="modal-mask">
            <div class="modal"
                role="dialog">
                <slot name="body">
                    No content
                </slot>
            </div>
        </div>
</template>

<script>
    export default {
        name: 'modal',
        methods: {
            close() {
                this.$emit('close');
            },
        },
    };
</script>
  

z-index работает только с position попробуйте присвоить position классу .modal относительный или абсолютный