web-dev-qa-db-fra.com

Position: l'élément absolu étant caché derrière les éléments ultérieurs

J'ai mis en place un jsfiddle pour illustrer mon problème ici . Essentiellement, j'ai un système de menus absolument positionné au-dessus de mon contenu principal, mais le contenu semble flotter devant les menus. Passez la souris sur "Lien 3" pour voir que ce n'est que le contenu principal qui le cache; les menus apparaissent ci-dessous lorsqu'ils sont suffisamment longs.

Mon en-tête de navigation ressemble à 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 y a pas mal de CSS, tout est à ce lien jsfiddle ci-dessus.

csspositionhiddenabsolute
17
user1684248

Utilisez le z-index Propriété CSS (niveau d'empilement). Un index z inférieur signifie un contexte d'empilement inférieur (donc si deux éléments frères qui se chevauchent ont des index z différents, celui avec l'indice z supérieur s'affichera en haut).

Notez que z-index établit un nouveau contexte d'empilement pour chaque niveau d'éléments, ils doivent donc être au même niveau du DOM. De plus, z-index ne fonctionne que sur les éléments positionnés, il ne fera donc rien sauf si vous les définissez en position relative, absolue ou fixe.

Correction de 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 d'informations sur l'index z: http://css-tricks.com/almanac/properties/z/z-index/

25
Ennui

Tu as un position: relative; dans le #media-slider, si vous n'avez pas l'intention d'utiliser cette propriété, supprimez et fonctionnera.

0
Ricardo Binns