Faire nav déroulante affichée au-dessus de tous les autres divs

J'ai une page que je suis en train de travailler sur l'endroit où actuellement, j'ai 2 éléments. Le point 1 est un flexnav jQuery menu de navigation avec un menu déroulant. Le point 2 est une nappe jQuery div molette. Je suis en train de la position de la nappe curseur juste en dessous de la flexnav menu. Le problème, je suis en cours d'exécution dans le bien, c'est quand vous passez la souris sur un des éléments de menu de la liste déroulante pour le sous-menu qui est couvert par la barre de défilement de la nappe de divs. Cela ne semble être le cas avec un écran plus grand que 800px comme le flexnav plugin modifie pour un mobile-friendly menu de navigation sur les petits écrans.

J'ai essayé de changer le css de la position des deux éléments, mais je n'arrive pas à comprendre comment faire des menus déroulants apparaissent au-dessus de la nappe de divs. Personne ne sait ce que je fais mal ici ou avez des suggestions sur comment je pouvais changer les choses pour obtenir ce que je cherche?

Voici un exemple JSFiddle

Le code, je suis en utilisant:

<header>
    <nav style="background-color: #FAD10E; height:50px">
    <div class="menu-button">Mobile Menu</div>
        <ul class="flexnav" data-breakpoint="800">
            <li><a href="">Home</a></li>
            <li><a href="">Stuff</a>

            <!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
              <ul>
                <li><a href="">Stuff 1</a></li>
                <li><a href="">Stuff 2</a></li>
                <li><a href="">Stuff 3</a></li>
                <li><a href="">Stuff 4</a></li>
                <li><a href="">Stuff 5</a></li>
                <li><a href="">Stuff 6</a></li>
              </ul>
            </li>
            <li><a href="/">Stuff 2</a></li>
            <li><a href="">Stuff 3</a></li>
            <li><a href="">Stuff 4</a></li>
            <li><a href="">Stuff 5</a></li>
        </ul>
    </nav>
</header>


<div>
    <!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
    <div class="autoplay">
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
    </div>
</div>

OriginalL'auteur Austin Adair | 2014-12-18

  1. 8

    Vous avez seulement besoin d'ajouter deux lignes de CSS

    Exemple de violon

    CSS

    .flexnav{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width:90%;
    position: relative; /* <-- Added */
    z-index: 1; /* <-- Added */
}

    La position: relative permet l'élément pour avoir un z-index appliqués (un élément ne doit pas être positionné de manière statique, le positionnement relatif permettra à l'élément à afficher dans la normale de la circulation des documents sans avoir un static de positionnement).

    La z-index: 1 dispose d'une partie de l'empilement de contexte pour la nav. Autrement, parce qu'il précède votre carrousel dans le flux de documents, sera nécessairement afficher en-dessous d'elle quand se chevauchent sans z-index donné.

    Contextes d'empilement s'appliquent généralement seulement à des éléments qui s'assoient à la même profondeur hiérarchique. Donc, en mettant au volant de votre nav avec un supérieur z-indexne fonctionne pas.

    Parfois, avec les z-index:1; est pas assez, vous ne savez pas quel autre plugin qu'il l'aide aussi a z-index, donc c'est mieux d'ajouter z-index:9999; juste pour être sûr, en tout cas, +1 pour l'ajout d'explication. 😀
    C'est effectivement, à mon avis, incroyablement mauvaise pratique. Mettre un arbitraire z-index signifie que vous êtes obligé de garder ces valeurs aléatoires dans votre propre tête. Je peux voir un argument pour donner un peu de souplesse pour l'insertion d'éléments dans ultérieure z-indexes, et peut-être l'incrémentation par quelque chose comme 10, mais je déteste l'ensemble "nous allons jeter un tas de 9s en ce z-index et espère que c'est assez élevée, un nombre." Il vient de cris paresseux. Et puis c'est une course aux armements entre les plugins et vos codes pour qui peut jeter la plupart des 9s dans le z-index valeur.
    Je suis d'accord avec vous si vous nous parliez de quelqu'un qui sait ce qu'il fait et ce qu'il faut chercher, mais comme nous ne sommes pas et l'auteur de la question ne savez pas à propos de z-index, cela pourrait ne pas fonctionner si il avait d'autres morceaux de code et il ne sait pas pourquoi. Dans mon propre et opinion personnelle, je crois que c'est un compromis travail le travail pour quelqu'un qui vient de commencer à apprendre le CSS.
    Ouais, j'ai été coupable de cela quand j'ai commencé à concevoir des sites web, mais je souhaite que j'avais appris plus tôt, en regardant en arrière sur des choses comme z-index: 999999999; en CSS. Vous commencez à avoir l'impression que tout ajout de plus 9s sera en quelque sorte comme par magie de générer un meilleur empilement contexte.
    J'ai entendu parler de z-index, mais n'a jamais été super sûr de la façon dont nous les correctement. Merci beaucoup pour l'explication. Vous avez fait de moi un meilleur code à cause de cela! Comme pour le nombre d'argument je indifférents à ce sujet. 999 sent le bâclé, mais en fin de compte, il fonctionne toujours.

    OriginalL'auteur Josh Burgess