Html 滚动图片时，导航栏在图片后面，但我不'；我不想使用z索引

当我尝试滚动时，导航栏在图像后面，但我不想使用z索引，因为我有一个灯箱，当你点击图像时，它会打开一个更大的图像，当更大的图像打开时，如果zindex为2，那么它会与我灯箱中的大图像重叠。任何帮助都会很好

编辑：当导航条为zindex时，我尝试将lightbox的索引设置为9000

灯箱上方的导航栏：

我希望导航栏位于灯箱后面，但当我滚动图像时，不要越过导航栏。

/**灯箱标记**/
.灯箱{
/**默认灯箱为隐藏*/
显示：无；
/**位置与风格*/
位置：固定；
z指数：2；
宽度：100%；
身高：100%；
文本对齐：居中；
排名：0；
左：0；
背景：rgba（0,0,0,0.8）；
}
.灯箱img{
/**填充灯箱图像*/
最大宽度：100%；
最大高度：95%；
利润率最高：2%；
}
.灯箱：目标{
/**删除默认浏览器轮廓*/
大纲：无；
/**取消隐藏灯箱**/
显示：块；
}
#包装纸{
宽度：90%；
高度：950px；
背景色：rgba（155,0.05）；
保证金：自动；
}
#导航条{
宽度：90%；
高度：60px；
背景色：白色；
不透明度：0.8；
位置：固定；
盒影：0.4px10px-2pxRGBA（0,0,0,0.1）；
z指数：0；
}
#导航栏组合{
宽度：90%；
高度：60px；
背景色：白色；
不透明度：0.8；
位置：固定；
盒影：0.4px10px-2pxRGBA（0,0,0,0.1）；
}
#主要内容索引{
高度：900px；
填充顶部：80px；
左侧填充：20px；
右边填充：20px；
}
#主要内容组合{
身高：100%；
填充顶部：80px；
左侧填充：20px；
右边填充：20px；
}
.导航文本{
浮动：左；
填充顶部：10px；
左侧填充：20px；
}
h3{
字体大小：25px；
字体系列：helvetica，无衬线；
显示：内联；
文本对齐：左对齐；
}
h4{
显示：内联块；
字体系列：helvetica，无衬线；
字体大小：13px；
}
导航{
右边填充：20px；
浮动：对；
盒影：纯黑100px；
}
李海军{
显示：内联块；
填充：15px；
}
导航a{
字体系列：helvetica，无衬线；
字体大小：14px；
颜色：黑色；
过渡：不透明度。5s缓进缓出；
}
导航a：悬停{
文字装饰：无；
不透明度：0.2；
}
/* __________________________________________
主要区域
__________________________________________ */
.欢迎横幅{
显示：块；
左边距：自动；
右边距：自动；
}
#组合按钮{
宽度：150px；
高度：50px；
填充顶部：15px；
左侧填充：30px；
背景色：rgba（0,0,0,1）；
颜色：白色；
边界半径：10px；
显示：块；
文字装饰：无；
字体系列：helvetica，无衬线；
利润率：40px自动；
过渡：不透明度。5s缓进缓出；
}
#公文包按钮：悬停{
不透明度：0.3；
}
/* __________________________________________
页脚
__________________________________________ */
#页脚{
宽度：100%；
高度：50px；
文本对齐：居中；
背景色：黑色；
明确：两者皆有；
填充顶部：15px；
}
.左分区{
浮动：左；
}
.div左p{
颜色：白色；
字体系列：helvetica，无衬线；
字体大小：13px；
左侧填充：20px；
}
.分区中心{
保证金：0自动；
宽度：100%；
}
.分区中心p{
颜色：白色；
字体系列：helvetica，无衬线；
字体大小：13px；
}
.分区中心a{
颜色：白色；
字体系列：helvetica，无衬线；
字体大小：13px；
左侧填充：10px；
文字装饰：无；
过渡：不透明度0.5s缓进缓出；
}
.分区中心a：悬停{
不透明度：0.3；
}
.右侧分区{
浮动：对；
}
.李国能{
显示：内联块；
}
.右分区ul li a{
颜色：白色；
字体系列：helvetica，无衬线；
字体大小：13px；
文字装饰：无；
右边填充：20px；
过渡：不透明度0.5s缓进缓出；
}
.div右ul li a:悬停{
不透明度：0.3
}
/*投资组合*/
.主接线盒{
背景色：rgba（0,0,0,0.05）；
宽度：300px；
高度：400px；
文本对齐：居中；
浮动：左；
左边距：50像素；
边缘顶部：10px；
边缘底部：20px；
}
.项目图标{
填充：10px；
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
过渡：过滤器0.6s容易；
-webkit过渡：-webkit过滤器0.6s易用性；
}
.项目图标：悬停{
过滤器：灰度（0）；
-webkit过滤器：灰度（0）；
}
.项目文本{
填充：10px；
字体系列：helvetica，无衬线；
字体大小：16px；
}
.项目文本标题{
字体大小：10px；
字体系列：helvetica，无衬线；
}

凯尔·杜普里兹
|投资组合






希腊字母海报

字体设计

媒体发布前海报
大格式
汉密尔顿马拉松海报

字体设计

电影海报

大格式
Crayola包装

包装设计

Laing Homes
小册子设计

2016年-凯尔·杜普里兹






LinkedIn:

如果您不想使用z索引， 我认为您需要重新排列DOM的顺序。因此，将导航移动到底部，并添加

top:0

---

如果您不想使用z索引， 我认为您需要重新排列DOM的顺序。因此，将导航移动到底部，并添加

top:0

我不明白，

#nav-bar {
    width: 90%;
    height: 60px;
    background-color: white;
    opacity: 0.8;
    position: fixed;
    top: 0;
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
    z-index: 0;
}