使导航下拉菜单显示在所有其他div之上

Question

我有一个页面,我正在努力目前我有2个项目.第1项是带有下拉列表的flexnav jQuery导航菜单.第2项是一个漂亮的jQuery div滚动条.我试图将光滑的滚动条放在flexnav菜单下面.我遇到的问题是当你将鼠标悬停在其中一个菜单项上时,子菜单的下拉列表被光滑的滚动条div所覆盖.这似乎仅在屏幕大于800px时发生,因为flexnav插件在小屏幕上变为移动友好的导航菜单.

我已经尝试更改两个项目的CSS位置设置,但我似乎无法弄清楚如何使下拉菜单显示在光滑的div上方.有谁知道我在这里做错了什么或者有什么建议我可以改变一切来实现我想要的东西？

这是JSFiddle的一个例子

我正在使用的代码:

<header>
    <nav style="background-color: #FAD10E; height:50px">
    <div class="menu-button">Mobile Menu</div>
        <ul class="flexnav" data-breakpoint="800">
            <li><a href="">Home</a></li>
            <li><a href="">Stuff</a>

            <!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
              <ul>
                <li><a href="">Stuff 1</a></li>
                <li><a href="">Stuff 2</a></li>
                <li><a href="">Stuff 3</a></li>
                <li><a href="">Stuff 4</a></li>
                <li><a href="">Stuff 5</a></li>
                <li><a href="">Stuff 6</a></li>
              </ul>
            </li>
            <li><a href="/">Stuff 2</a></li>
            <li><a href="">Stuff 3</a></li>
            <li><a href="">Stuff 4</a></li>
            <li><a href="">Stuff 5</a></li>
        </ul>
    </nav>
</header>


<div>
    <!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
    <div class="autoplay">
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
    </div>
</div>

Answer 1

您只需要添加两行CSS

示例小提琴

CSS

.flexnav{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width:90%;
    position: relative; /* <-- Added */
    z-index: 1; /* <-- Added */
}

该position: relative允许元件具有的z-index施加(元件不能被静态定位,相对定位将允许元件在正常文件流动而不具有显示器static定位).

所述z-index: 1提供的资产净值一个单独的堆叠环境.否则,因为它在文档流程中位于您的轮播之前,在没有z-index给定的情况下重叠时必然会显示在其下方.

堆叠上下文通常仅适用于位于相同分层深度的元素.因此,将弹出按钮放在导航器中更高的z-index将不起作用.