CSS 位置：绝对元素隐藏在后面的元素后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12982073/
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
Position:absolute element being hidden behind later elements
提问by user1684248
I've put together a jsfiddle to illustrate my problem here. Essentially, I've got an absolutely-positioned menu system above my main content, but the content seems to be floating in front of the menus. Hover over "Link 3" to see that it's just the main content that's hiding it; the menus show up below when they're long enough.
我已经把一个的jsfiddle来说明我的问题在这里。本质上，我在主要内容上方有一个绝对定位的菜单系统，但内容似乎浮动在菜单前面。将鼠标悬停在“链接 3”上以查看它只是隐藏它的主要内容；当菜单足够长时，菜单会显示在下方。
My nav-header looks something like this:
我的导航标题看起来像这样：
<div id='nav-header'>
<div class='nav-bar'>
<div class='nav-item '>
<a class='link-3' href='#'>
<div class='nav-text-container'><p>Link 3</p></div>
</a>
<div class='flydown-container link-3'>
<div class='flydown'>
<div class='header'>Heading 1</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 4</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 5</span></a></li>
</ul>
<div class='header'>Heading 2</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
There's quite a bit of CSS, it's all at that jsfiddle link above.
有相当多的 CSS，都在上面的 jsfiddle 链接中。
回答by Ennui
Use the z-indexCSS property (stacking level). Lower z-index means lower stacking context (so if two overlapping sibling elements have different z-indices, the one with the higher z-index will display on top).
使用z-indexCSS 属性（堆叠级别）。较低的 z-index 意味着较低的堆叠上下文（因此，如果两个重叠的兄弟元素具有不同的 z-index，则具有较高 z-index 的元素将显示在顶部）。
Note that z-index establishes a new stacking context for each level of elements so they need to be on the same level of the DOM. Also, z-index only works on positioned elements so it won't do anything unless you set them to relative, absolute or fixed position.
请注意，z-index 为每个元素级别建立了一个新的堆栈上下文，因此它们需要位于 DOM 的同一级别。此外，z-index 仅适用于定位元素，因此除非您将它们设置为相对、绝对或固定位置，否则它不会执行任何操作。
Fixed your code:
修复了您的代码：
#nav-header {
width: 940px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
#upper-section {
height: 300px;
font-size: 0;
position: relative;
z-index: 1;
}
More z-index info: http://css-tricks.com/almanac/properties/z/z-index/
更多 z-index 信息：http: //css-tricks.com/almanac/properties/z/z-index/
回答by Ricardo Binns
You have a position: relative;in the #media-slider, if you dont have a purpose to use this property, remove and will work.
你有position: relative;在#media-slider，如果你没有一个目的使用这个属性，删除，并将努力。
