Css 位置：绝对元素隐藏在后面的元素中

我已经整理了一个jsfiddle来说明我的问题。基本上，我在我的主要内容上面有一个绝对定位的菜单系统，但内容似乎在菜单前面浮动。将鼠标悬停在“链接3”上，可以看到隐藏它的只是主要内容；当菜单足够长时，会显示在下面

我的导航标题如下所示：

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

标题1







标题2

---

有相当多的CSS，都在上面的JSFIDLE链接上。

你有一个

位置：相对#媒体滑块中的code>，如果您没有使用此属性的目的，请删除并将其工作。
使用
z-index
CSS属性（堆叠级别）。较低的z索引意味着较低的堆叠上下文（因此，如果两个重叠的同级元素具有不同的z索引，则具有较高z索引的元素将显示在顶部）

请注意，z-index为每个级别的元素建立了一个新的堆栈上下文，因此它们需要位于DOM的同一级别上。此外，z-index只对定位元素起作用，所以除非将它们设置为相对、绝对或固定位置，否则它不会做任何事情

修复了您的代码：

#nav-header {
    width: 940px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
#upper-section {
    height: 300px;
    font-size: 0;
    position: relative;
    z-index: 1;
}

更多z-索引信息：
尝试取下
位置：相对来自
#媒体滑块
。为…工作me@RicardoArruda加上这个作为答案，不完全是。它似乎可以工作，但添加了
背景色的样式：蓝色
至
。媒体容器
显示菜单仍处于隐藏状态。太好了，非常感谢！我以前尝试过z-index，但我不知道需要定位的元素。“而且，z-index只对定位的元素有效，所以除非将它们设置为相对、绝对或固定位置，否则它不会做任何事情。”是的！！可爱的动作！这就是罪魁祸首。