绝对定位的元素被后面的元素遮挡了。

Question

绝对定位的元素被后面的元素遮挡了。

21

我已经创建了一个jsfiddle来说明我的问题，在这里。基本上，我的主要内容前面有一个绝对定位的菜单系统，但是内容似乎漂浮在菜单前面。将鼠标悬停在“Link 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>

有相当多的 CSS，都在上面那个 jsfiddle 链接里。

- user1684248

1

尝试从#media-slider中去掉position: relative;。这对我有效。 - Ricardo Binns

@RicardoArruda 把它作为一个答案添加。 - bookcasey

2个回答

0

在#media-slider中有一个position: relative;，如果您没有使用此属性的目的，请将其删除即可正常工作。

- Ricardo Binns

不完全正确。看起来它能工作，但是给.media-container添加一个background-color: blue;的样式后发现菜单仍然被隐藏了。 - user1684248

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ennui · Accepted Answer

使用CSS属性z-index（叠放等级）来实现。较低的z-index表示较低的堆叠上下文（因此，如果两个重叠的兄弟元素具有不同的z-index，则具有较高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-index 的信息: http://css-tricks.com/almanac/properties/z/z-index/