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

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:

我的nav-header看起来像这样:

<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链接。

2 个解决方案

#1

Use the z-index CSS 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-index CSS属性(堆栈级别)。较低的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/

#2

You have a position: relative; in the #media-slider , if you dont have a purpose to use this property, remove and will work.

你有一个职位:亲戚;在#media-slider中,如果你没有使用此属性的目的,删除并将工作。

#1