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

时间:2012-10-19 20:35:01

标签: css position hidden absolute

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

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

有相当多的CSS,它都在上面的jsfiddle链接。

2 个答案:

答案 0 :(得分:23)

使用z-index 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/

答案 1 :(得分:0)

position: relative;中有#media-slider,如果您没有使用此属性的目的,请删除并运行。