如何在Vue.js中使用模态和粘性导航栏修复z-index？

Question

在此先感谢您的帮助。 我将使用该解决方案更新此帖子，因为我认为有些人可能会遇到相同的问题，并且在网络上搜索后我找不到答案。

问题 我在App.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;
}

App.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>

Answer 1

z-index仅适用于位置尝试将位置赋予.modal类相对或绝对