Z-index non respectés

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Hey !
Salut à tous. Aujourd'hui, j'essayais de faire moi même des jolies "pop-up" en JS.

Le principe est simple, quand on appui sur un lien comprenant une class donnée alors on donne une class particulière à la balise div juste après (contenu de ma pop-up) et à une balise d'id donnée (background).
Mon background est là pour assombrir le reste de la page et mettre en avant la pop-up.
Mon code JS marche très bien, mes balises change de class comme il faut.

Mon problème à l'air de venir du CSS… Je voudrais assombrir toute ma page avec le background, sauf ma pop-up. Pour cela j'utilise la propriété CSS z-index, en mettant ma pop-up à 10 et mon background d'assombrissement à 9.

Voilà mon code HTML & CSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
    <head>
        <!-- mes balises meta et inclusions de styles et scripts -->
    </head>

    <body>
        <!-- Mon background pour assombrir -->
        <div id="JSPopUp-background" class="no-actif"></div>

        <div id="content">
            <!-- ... -->
                        <!-- Mon lien faisant apparaître ma pop-up -->
                        <a href="#" id="contact" class="JSPopUp">Mon lien de pop-up</a>
                        <!-- Ma pop-up -->
                        <div class="JSPopUpContent no-actif">
                            Contenu de ma pop-up
                        </div>
            <!-- ... -->
        </div>    
    </body>
</html>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
a.JSPopUp + div.JSPopUpContent{
    position: absolute;
    z-index: 10;
    min-width: 500px;
    min-height: 200px;
    left: 50%;
    transform: translate(-50%, 0);
    background: white;
}
    a.JSPopUp + div.JSPopUpContent.no-actif{        display: none;}
    a.JSPopUp + div.JSPopUpContent:not(.no-actif){  display: block;}

div#JSPopUp-background:not(.no-actif){
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    opacity: 0.5;
    z-index: 9;
}
    div#JSPopUp-background.no-actif{       display: none;}
    div#JSPopUp-background:not(.no-actif){ display: block;}

Je ne comprend pas pourquoi ma div#JSPopUp-background se met devant ma pop-up div.JSPopUpContent alors que les z-index sont bien spécifiés…
Quelqu'un a une idée?

+0 -0
Auteur du sujet

C'est bon, après deux longues heures de remuages de méninges, j'ai réussi à trouver d'où venait le problème :)

J'avais mis un z-index sur ma div#content qui était inférieur à celui de mon background d'assombrissement, et comme ma pseudo pop-up était dedans, ça lui donnait par héritage ce z-index.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte