Javascript 已应用z索引，但未按顺序堆叠元素

console.log（“已连接”）；
$（'[data toggle=“slide collapse”]'）。在（'click'，function（）上{
$navMenuCont=$（$（this.data（'target'））；
$navMenuCont.animate({
“宽度”：“切换”
}, 350);
});
函数openNav（）{
if（window.matchMedia（“（最小宽度：641px）”）.matches）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}否则{
document.getElementById（“mySidenav”）.style.width=“180px”；
}
document.getElementById（“mySidenav”）.style.boxShadow=“0.6px 0.6px 10px黑色”；
$（'.overlay'）.show（）；
}
$（document.body）。单击（函数（evt）{
var snav=$（“mySidenav”）；
var itselements=$（“.nottarget”）；
如果（！snav.is（evt.target）&&！itssements.is（evt.target）&&window.matchMedia（（（最大宽度：768px）”）.matches）{
document.getElementById（“mySidenav”）.style.width=0；
$（'.overlay'）.hide（）；
}
});
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
$（'.overlay'）.hide（）；
}

.overlay{
位置：固定；
显示：无；
顶部：0px；
左：0px；
右：0px；
底部：0px；
背景色：rgba（0,0,0,0.589）；
z指数：2；
}
#导航栏{
宽度：100%；
边缘底部：100px；
填充：0；
背景图像：线性梯度（rgba（23,52,124,1），rgba（23,52,124,9））；
高度：35px；
盒影：1px1px8pxRGBA（0,0,0,51）；
}
sticktop先生{
位置：固定；
/*将导航栏设置为固定位置*/
排名：0；
/*将导航栏定位在页面顶部*/
z指数：1；
/*加上这个*/
}
.侧导航a{
字体大小：16px；
显示：块；
过渡：.3s；
文字装饰：无；
颜色：#818181；
}
.sidenav.closebtn{
字体大小：36px；
位置：绝对位置；
排名：0；
右：25px；
左边距：50像素；
}
#标志img{
宽度：180px；
}
#火腿{
填充：1px；
不透明度：.75；
}
#哈姆：悬停{
不透明度：1；
}
.三十二左{
溢出：隐藏；
填充：8px 8px 8px 32px；
空白：nowrap；
}
.导航链接{
边框顶部：1px实心透明；
边框底部：1px实心透明；
}

文件

只要看一下CSS，您的sidenav就是stickytop的子项，stickytop的z索引为1。也许有什么问题，但为什么在检验中z指数是5？如果它继承自stickytop，那么在chrome inspection中z-index:5是否会被删除？z-index可能会在sidenav上设置为5，但这并不一定意味着它的所有父项也都是该z-index。举个例子：父div是display none，但是如果您在inspector中找到p标记并查看它，它就是display block。但它没有显示，因为它的父对象被隐藏的优先级使它被隐藏。z-index可能也有类似的行为。我试过z-index:5重要！；它不起作用。另外，由于id比类I具有更多的优先权，所以添加了另一个z索引为10的id。检查员确实说z指数为10，但仍然不起作用。我是否可以通过任何方式覆盖父属性？