Partage
  • Partager sur Facebook
  • Partager sur Twitter

z-index

    23 mai 2017 à 13:01:20

    Bonjour,

    Je dois ajouter une modal sur un site web. Ça, aucun souci, j'le fait les doigts dans le nez.

    Donc la modal apparait correctement, sauf que lorsque je scroll, paf, elle passe sous le header!

    Et c'est encore plus flagrant sur mobile, le header rend la modal complètement inaccessible.

    Donc je regarde le z-index du header, je met sur ma modal un z-index superieur, mais ça reste toujours en dessous.

    Voilà comment est construit mon truc.

    <body>
    <header style="z-index: 10080">
    
    </header>
    <div style="z-index: 1">
    <div class="modal" style="z-index: 90000">
    
    </div>
    </div>
    
    
    </body>

    Donc vous me direz que c'est normal, la div qui contient ta modal a un z-index inférieur, du coup c'est normal que ça passe devant.

    D'où ma question: est-il possible de faire en sorte que tout en restant dans cette div avec un z-index de 1, en passant devant le header?

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
    Don't Panic
      23 mai 2017 à 13:50:12

      Salut,

      bah non c'est pas faisable :)

      à partir du moment ou tu mets une hiérarchie de z-index, il faut suivre un déroulement logique. C'est comme pour les h1 et h2 et h3. h1 vient en premier et h2 en second et h3 en troisième dans la hiérarchie. après tu peux placer peut-être ton modal en position absolute (sans z-index ni ta div qui englobe) et le mettre directement en un z-index > à celui du header.

      Mais cherches-tu à faire au juste ? t'aurais un exemple déjà vu sur un site de ce que tu veux exactement ?

      • Partager sur Facebook
      • Partager sur Twitter

      Le CSS ça peut craindre -->Conférence CSS3.CREATE

        23 mai 2017 à 18:39:04

        Bonjour, 

        Z-index ne s'utilise qu'avec la propriété css position (static, relative, absolute, fixed). Sans la propriété position, Z-index ne marche pas.

        • Partager sur Facebook
        • Partager sur Twitter
          24 mai 2017 à 10:17:27

          Bonjour, merci de vos réponses.

          C'est ce qui me semblait stefde3, je voulais m'en assurer. Du coup ça m'embette un peu.

          Ce que je veux éviter c'est devoir mettre ce modal hors de la div, au même niveau que le header: Je travaille sur un site de e-commerce développé avec ZEND (Magento), que je ne connais pas bien, et je galère pour mettre ce bout de code hors de mon petit fichier.

          En dessous, voilà ce qui se passe. En fait on a toujours le header en haut de page, et quand on scroll, ça passe par dessus le reste. Moi je veux que ma modal reste toujours au premier plan.

          Merci

          (me_moi: merci, j'ai corrigé ça à un ou deux endroits, mais je n'ai pas constaté de changement)

          • Partager sur Facebook
          • Partager sur Twitter
          Don't Panic
            24 mai 2017 à 20:36:33

            mai ta div là... elle sert à rien si ?

            Si elle est vide à quoi peut-elle bien te servir ?

            Ah moins que tu t'en sers pour assombrir ton site en arrière plan quand le modal est actif ?

            • Partager sur Facebook
            • Partager sur Twitter

            Le CSS ça peut craindre -->Conférence CSS3.CREATE

              24 mai 2017 à 20:42:55

              En fait c'est un peu plus compliqué...

              Ma div est loin d'être vide, en fait elle contient tout le contenu de la page (en excluant le header et le footer, ainsi que d'autres exceptions)

              Le schéma que j'ai fait est simplifié. Très simplifié.

              • Partager sur Facebook
              • Partager sur Twitter
              Don't Panic
                24 mai 2017 à 20:46:25

                c'est la partie section quoi en gros celle qui contient tout ton site

                le modal passe par-dessus en position fixed ou il reste dans le corps de ton site ?

                 Pour moi un modal c'est pas ça hein. un modal est un pop up qu'on fait apparaître et disparaître. là ton modal a l'air de rester en place et de scroller avec ton body donc je comprends pas l'intérêt de le placer au-dessus de ton header en fait ^^

                un modal c'est ça pour moi :

                Exemple (cliques sur CGU)

                -
                Edité par stefde3 24 mai 2017 à 20:47:17

                • Partager sur Facebook
                • Partager sur Twitter

                Le CSS ça peut craindre -->Conférence CSS3.CREATE

                  25 mai 2017 à 12:00:38

                  C'est bien une modal que j'ai faite ;)

                  Prend un produit au pif, va dans le panier et clique sur "Pour recevoir votre code offre, cliquez ici"

                  vieuxlien

                  -
                  Edité par Mriic 29 mai 2017 à 11:02:04

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Don't Panic
                    25 mai 2017 à 12:17:01

                    Bonjour,

                    le "z-index: 1;" sur .main te sert à quelque chose en particulier ? Parce qu'en gros c'est ça ton problème.

                    Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.

                    Source : https://css-tricks.com/almanac/properties/z/z-index/

                    -
                    Edité par Lamecarlate 25 mai 2017 à 12:17:10

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pas d'aide concernant le code par MP, le forum est là pour ça :)

                      25 mai 2017 à 13:38:25

                      Merci Lamecarlate.

                      En fait, je suis dans cette entreprise depuis pas très longtemps, j'avais aucune expérience sur magento ni sur un framework comme zend.

                      Du coup je ne sais pas encore trop pourquoi certaines choses sont configurées comme telles.

                      Et je crois que le z-index du main doit être inferieur à celui du header: quand on scroll, il se place en haut de page.

                      Je pense comprendre ce qui me reste à faire: mettre ce modal hors du .main. Ce que je voulais éviter puisque je ne sais pas comment faire :D

                      Merci!

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Don't Panic
                        25 mai 2017 à 13:40:01

                        En fait vu comme c'est parti ton truc, je vois ce que tu veux faire... le soucis est que ton overlay (ta div#Modal

                        FadeInInscription ou ta classe modal peu importe), tu le fais au même endroit que ton div avec la class modal-content.

                        Il faut séparer les deux si tu veux pas que l'un agisse sur l'autre. en les plaçant séparément en position fixed pour le overlay et en position absolute en-dehors de ton overlay et donc par dessus ton header alors se sera faisable mais faut séparer les deux et pas les imbriquer l'un dans l'autre.

                        PS : mon modal moi est en position fixed sans scroll sauf mon contenu qui se scroll sur le container. Toi même ton overlay se scroll et je comprends pas pourquoi tu fais ça :)

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Le CSS ça peut craindre -->Conférence CSS3.CREATE

                        z-index

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur
                        • Markdown