css - Sidenav Z-Index 窗口变暗

Question

我正在使用 materializecss，我不得不将 z-index 放入 navbar 类中，因为导航栏隐藏在我的全屏 slider 下方。现在一切正常，但是当我想点击我的侧边栏时，我遇到了这个问题:

整个窗口变暗，我无法点击任何地方。我想我做错了那个 z-index

这是我的 CSS 代码:

.slider {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
#nav{
    z-index: 10;
    position: relative;
}
.sideNav {
    z-index: 11;
}

我该如何解决这个问题？

Answer 1

发生这种情况是因为您在 #nav 中使用 position:relative 将 position:relative 给 .sideNav 还有

.slider {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#nav{
z-index: 10;
position: relative;
}
.sideNav {
z-index: 11;
position: relative;
}