20

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

4

2 に答える 2

28

z-indexCSS プロパティ (スタッキング レベル)を使用します。低い z インデックスは、スタック コンテキストが低いことを意味します (つまり、重なり合う 2 つの兄弟要素の 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-index の詳細: http://css-tricks.com/almanac/properties/z/z-index/

于 2012-10-19T20:43:45.037 に答える
0

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

于 2012-10-19T20:41:55.110 に答える