使导航下拉显示高于所有其他divs

I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.

我有一个页面，目前我有两个项目。项目1是一个带有下拉菜单的flexnav jQuery导航菜单。项目2是一个光滑的jQuery div scroller。我想把光滑的滚轴放在flexnav菜单下面。我遇到的问题是当你悬停在一个菜单项上时副菜单的下拉菜单会被漂亮的scroller divs掩盖。当flexnav插件在小屏幕上改变移动友好导航菜单时，这似乎只会发生在大于800px的屏幕上。

I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?

我尝试过改变这两项的css位置设置，但是我似乎不知道如何让下拉菜单出现在漂亮的div上面。有人知道我在这里做错了什么吗?或者有什么建议可以让我改变周围的事情来实现我的目标吗?

Here is a example JSFiddle

这里有一个例子JSFiddle

The code I am using:

我正在使用的代码:

<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>

1 个解决方案

#1

You only need to add two lines of CSS

您只需添加两行CSS

Example fiddle

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 */
}

The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).

位置:相对允许元素应用z索引(元素不能静态定位，相对定位允许元素在正常文档流中显示，而不需要静态定位)。

The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.

z-index: 1为nav提供了一个单独的叠加上下文。否则，因为它在文档流中先于您的carousel，在没有给定z索引的情况下，将必然显示在它下面。

Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.

堆叠上下文通常只适用于层次深度相同的元素。所以在你的导航系统里放一个更高的z指数是行不通的。