html - 使导航下拉列表显示在所有其他 div 之上

Question

我有一个正在处理的页面，目前我有 2 个元素。 Item 1 是一个带有下拉菜单的 flexnav jQuery 导航菜单。 Item 2 是一个漂亮的 jQuery div 滚动条。我试图将光滑的滚动条定位在 flexnav 菜单的正下方。我遇到的问题是，当您将鼠标悬停在其中一个菜单项上时，子菜单的下拉菜单会被光滑的滚动条 div 覆盖。这似乎只发生在大于 800px 的屏幕上，因为 flexnav 插件在小屏幕上更改为移动友好的导航菜单。

我已经尝试更改这两个元素的 css 位置设置，但我似乎无法弄清楚如何使下拉菜单显示在光滑的 div 上方。有谁知道我在这里做错了什么，或者对我如何改变周围的事物以实现我正在寻找的东西有任何建议？

Here is a example 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

Example fiddle

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 的导航栏中是行不通的。