html+css轮播图覆盖导航栏二级菜单的问题，已对z-index进行了设置，怎么还是不行呀

Question

这是index.html文件

<!--导航栏开始-->
        <div class="navi">
            <ul class="naviul">
                <li class="navili navi1"><a href="index.html">首页</a></li>
                <li class="navili navi2">
                    <a href="#">教务相关</a>
                    <ul class="navi_detail">
                        <li><a href="#">课程查询</a></li>
                        <li><a href="#">成绩查询</a></li>
                    </ul>
                </li>
                <li class="navili navi3">
                    <a href="#">问题反馈</a>
                    <ul class="navi_detail">
                        <li><a href="#">宿舍问题反馈</a></li>
                        <li><a href="#">教室问题反馈</a></li>
                        <li><a href="#">食堂问题反馈</a></li>
                    </ul>
                </li>
                <li class="navili navi4">
                    <a href="#">信息交流</a>
                    <ul class="navi_detail">
                        <li><a href="#">校内论坛</a></li>
                        <li><a href="#">留言板</a></li>
                    </ul>
                </li>
                <li class="navili navi5"><a href="#">关于我们</a></li>
            </ul>
        </div>
        </div>
        <!--导航栏结束-->
        <!--首页滚动图开始-->
        <div class="banner-container">
            <div class="banner">
                <div class="bd">
                    <ul>
                        <li><a href="#"><img src="../images/lunbotu2.jpg"></a></li>
                        <li><a href="#"><img src="../images/lunbotu1.jpg"></a></li>
                        <li><a href="#"><img src="../images/2023_11_23_12_00_33_519.jpg"></a></li>
                        <li><a href="#"><img src="../images/2023_11_23_12_00_55_767.jpg"></a></li>
                        <li><a href="#"><img src="../images/2023_12_13_10_19_10_935.jpg"></a></li>
                    </ul>
                </div>
                <div class="hd"><ul></ul></div>
                <a class="prev"></a>
                <a class="next"></a>    
            </div> 
        </div>
        <script type="text/javascript">
                $(".banner").slide({
                    titCell: ".hd ul",
                    mainCell:".bd ul",
                    autoPlay: true,
                    autoPage: true,
                });
        </script>
        <!--首页滚动图结束-->
    </div>

这是它的style.css样式代码

.navi {
    position: relative;
    z-index: 2; /* 设置 .navi 的 z-index 值为 2，确保它在轮播图之上 */
}

.naviul {
    width: 1002px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.navili {
    width: 92px;
    height: 40px;
    line-height: 40px;
}

.navili:first-of-type {
    width: 64px;
}

.navili a {
    color: white;
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: bold;
    display: block;
    text-align: right;
}

.navili:hover {
    background: url(../images/shangjian.png) no-repeat center bottom;
}

.navi1 a {
    background: url(../images/shouye.png) no-repeat left center;
}

.navi1 a:hover {
    background: url(../images/shouye.png) no-repeat left center;
}

.navi2 a {
    background: url(../images/jiaowu.png) no-repeat left center;
}

.navi2 a:hover {
    background: url(../images/jiaowu.png) no-repeat left center;
}

.navi3 a {
    background: url(../images/fankui.png) no-repeat left center;
}

.navi3 a:hover {
    background: url(../images/fankui.png) no-repeat left center;
}

.navi4 a {
    background: url(../images/xinxi.png) no-repeat left center;
}

.navi4 a:hover {
    background: url(../images/xinxi.png) no-repeat left center;
}

.navi5 a {
    background: url(../images/guanyu.png) no-repeat left center;
}

.navi5 a:hover {
    background: url(../images/guanyu.png) no-repeat left center;
}

.navi_detail {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 1002px;
    background-color: #73b8ff;
    justify-content: space-around;
    z-index: 99999999; /* 设置 .navi 的 z-index 值为 2，确保它在轮播图之上 */
    visibility: hidden; /* 初始状态设置为隐藏 */
}

.navi_detail li {
    width: 92px;
}

.navi_detail a {
    text-align: center;
    background: none;
}

.navi_detail a:hover {
    background: none;
}

.navili:hover .navi_detail {
    display: flex;
    visibility: visible; /* 鼠标移入导航栏时显示二级选项 */
}

.banner {
    width: 100%;
    height: 197px;
    
    overflow: hidden;
    z-index: 1; /* 设置轮播图的 z-index 值为 1 */
}

.banner.down {
    top: 240px; /* 将轮播图下移200px */
}

.bd {
    position: relative;
    height: 100%;
    z-index: 1;
}

.banner img {
    width: 100%;
    z-index: 1;
}

.hd {
    position: absolute;
    height: 10px;
    bottom: 40px;
    width: 100%;
    z-index: 1;
}

.hd ul {
    display: block;
    overflow: hidden;
    text-align: center;
    height: 8px;
    z-index: 1;
}

.hd ul li {
    display: inline;
    height: 10px;
    Line-height: 10px;
    padding: 0 15px;
    background: #fff;
    content: '#fff';
    cursor: pointer;
    margin: 0 2px;
    z-index: 1;
}

.hd ul li.on {
    background-color: #005d8c;
    color: #005d8c;
}

.prev {
    position: absolute;
    left: 3%;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../images/slider-arrow.png) -110px 5px no-repeat;
}

.next {
    position: absolute;
    right: 3%;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../images/slider-arrow.png) 8px 5px no-repeat;
}

.prev:hover {
    opacity: 1;
}

.next:hover {
    opacity: 1;
}

/*轮播图结束*/

请问为什么我的导航栏二级选项依然会被轮播图覆盖，而不是显示在轮播图之上。我已经对z-index进行设置了呀。

Answer 1

引自免费微信小程序：皆我百晓生

看起来你已经设置了正确的z-index值来尝试解决这个问题，但可能是因为某些CSS属性没有正确应用导致的。为了确保导航栏二级菜单（.navi_detail）始终位于轮播图之上，我们需要做以下几个调整：

首先，在.navi上增加一个绝对定位，这样它可以脱离文档流，并且不会影响到其他元素的位置。同时，我们还需要给.banner-container添加相对定位，以便于.navi在其上方定位。

然后，将.navi的z-index值提高到比轮播图更高的级别，例如9999，以确保它总是出现在最上面。

最后，更新.navi_detail的CSS，将它的z-index值设置得更高，比如10000，并且确保它在鼠标离开导航栏时仍然保持可见，这样当用户在轮播图上滑动时，二级菜单也不会被遮挡。

以下是修改后的HTML和CSS代码：

<!-- ... -->
<div class="banner-container" style="position: relative;">
    <!-- ... -->
</div>
<!-- ... -->

.navi {
    position: absolute; /* 添加绝对定位 */
    top: 0;
    z-index: 9999; /* 提高 z-index 值 */
}

.navi_detail {
    z-index: 10000; /* 提高 z-index 值 */
    visibility: visible; /* 默认不隐藏，始终显示 */
}

.navili:hover .navi_detail {
    /* 删除这一行，因为我们不需要在鼠标移入时才显示二级菜单 */
}

请注意，上述代码是基于现有代码的修改。将这些更改应用于你的项目，应该可以解决导航栏二级菜单被轮播图覆盖的问题。如果还有其他问题，请随时告诉我。