Position: élément absolu caché derrière des éléments postérieurs

J'ai mis en place un jsfiddle pour illustrer mon problème ici. Essentiellement, j'ai un positionnement absolu, le système de menu au-dessus de mon contenu principal, mais le contenu semble flotter devant les menus. Placez le curseur sur "Lien 3" pour voir que c'est juste le contenu principal c'est de les cacher; les menus affichent ci-dessous, lorsqu'ils sont assez long.

Mon nav-d'en-tête ressemble à quelque chose comme ceci:

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

Il est tout à fait un peu de CSS, c'est tout à jsfiddle lien ci-dessus.

source d'informationauteur user1684248

  1. 19

    Utiliser le z-index propriété CSS (cumulative). Baisse des z-index moyen inférieur de l'empilement de contexte (donc si les deux se chevauchent les éléments frères ont différents z indices, l'un avec le z-index supérieur affichera sur le dessus).

    Remarque que z-index établit un nouveau contexte d'empilement pour chaque niveau d'éléments de sorte qu'ils doivent être sur le même niveau du DOM. Aussi, le z-index ne fonctionne que sur des éléments positionnés de manière à ne pas faire quelque chose, sauf si vous les mettez à la relative, absolue ou position fixe.

    Fixe votre 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;
}

    Plus z-index info: http://css-tricks.com/almanac/properties/z/z-index/

  2. 0

    Vous avez un position: relative; dans le #media-slider , si vous n'avez pas un but à l'utilisation de cette propriété, de supprimer et de travail.