Html 使导航下拉列表显示在所有其他 div 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27551287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make nav dropdown show above all other divs
提问by Austin Adair
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.
我有一个页面正在处理，目前我有 2 个项目。Item 1 是一个带有下拉菜单的 flexnav jQuery 导航菜单。Item 2 是一个漂亮的 jQuery div 滚动条。我试图将光滑的滚动条放在 flexnav 菜单的正下方。我遇到的问题是，当您将鼠标悬停在其中一个菜单项上时，子菜单的下拉列表会被光滑的滚动条 div 覆盖。这似乎只发生在大于 800 像素的屏幕上，因为 flexnav 插件在小屏幕上更改为移动友好的导航菜单。
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 上方。有谁知道我在这里做错了什么，或者对我如何改变周围的事物以实现我正在寻找的东西有任何建议？
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>
回答by Josh Burgess
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: relativeallows 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 staticpositioning).
该position: relative允许元件具有的z-index施加（元件不能被静态定位，相对定位将允许元件在正常文档流显示，而不具有static定位）。
The z-index: 1provides 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-indexgiven.
所述z-index: 1提供的资产净值一个单独的堆叠环境。否则，因为它在文档流中位于您的轮播之前，所以在没有z-index给定的情况下重叠时必然会显示在它的下方。
Stacking contexts apply generallyonly to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.
堆叠上下文通常仅适用于位于相同层次深度的元素。因此，将弹出按钮放在导航中并使用更高的值是z-index行不通的。
