web-dev-qa-db-ja.com

位置：後の要素の後ろに隠されている絶対要素

私の問題を説明するためにjsfiddleをまとめました here 。基本的に、メインコンテンツの上に絶対配置のメニューシステムがありますが、コンテンツがメニューの前に浮いているようです。 「リンク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リンクにあります。

csspositionhiddenabsolute
17
user1684248

使用 z-index CSSプロパティ（スタックレベル）。 z-indexが低いほど、スタックコンテキストが低くなります（したがって、2つの重複する兄弟要素に異なるz-indiceがある場合、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/

25
Ennui

あなたが持っている position: relative; の中に #media-slider、このプロパティを使用する目的がない場合は、削除して機能します。

0
Ricardo Binns