AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Partie 2 - Etape 7 : Les positions et le z-index

    Partagez
    Scavenger
    MasculinAge : 24Messages : 1495

    le Mar 5 Mar 2013 - 23:04

    Les positions & le z-index



    Bonjour à tous,
    Ici je vais m'attaquer à ce tutoriel avec Angelusia (qui fera les transitions), n'hésitez pas à venir déposer vos idées et propositions d'améliorations !

    Tout d'abord, je tiens à préciser que ce tutoriel a été réalisé sous Mozilla Firefox, certaines explications devront être adapté au navigateur que vous utilisez.


    Les positions



    A quoi sert les positions ? Et bien tout simplement à agencer vos différents "blocs" pour créer un site/forum agréable à regarder (aussi appelé "la mise en page").
    Il existe cinq valeurs possibles pour la propriété CSS "position" :
           -static
           -relative
           -absolute
           -fixed
           -inherit

    Note: Pour la suite du tutoriel, j'utiliserais des carrés de couleurs différentes pour montrer les différents blocs.

    La position static



    La position "static" est la position par défaut de vos différents blocs.

    Exemple:


    Code:
    <div ID="blue">
    </div>
    <div ID="red">
    </div>
    Code:
    #blue{
         width: 50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         width: 50px;
         height: 50px;
         background-color: red;
    }


    La position absolute



    La position "absolute" est une position qui va peut-être vous paraitre difficile à appréhender, mais elle peut s'avérer utile, elle définit le bloc par rapport aux bords de la page web, non plus par rapport aux autres blocs. Si vous créez un bloc avec une position absolute sans avoir prévu de la place pour celui-ci avant, il est fort probable que votre bloc recouvre une partie de votre site/forum.
    Ici je définis un bloc qui englobe mes deux carrés pour qu'ils ne s'affichent pas devant le texte que j'écris.

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 50px;
    }
    #blue{
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: red;
    }

    Vous vous demandez probablement pourquoi il n'y a plus de carré bleu ? En fait, le carré bleu n'a pas disparu. Il est juste passé derrière le carré rouge, souvenez vous, j'ai écrit juste avant que la position "absolute" positionnait les différents blocs en fonction des bords de la page ! Les deux blocs sont ainsi au même endroit.
    Il suffit alors de modifier le placement d'un des deux carrés pour faire apparaitre l'autre. Ici, je déplace mon carré rouge de 50 pixel sur la droite (mes carrés font 50*50 pixels), grâce à une margin-left de 50px pour lui donner sa position dans ma div qui englobe ces deux carrés.

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 50px;
    }
    #blue{
         position: absolute;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: absolute;
         width:50px;
         height: 50px;
         background-color: red;
         margin-left: 50px;
    }

    Le margin-left définit le placement de mon carré rouge par rapport à ma div qui englobe ces deux carrés. Que se passerait-il si je définissais le placement de ce carré rouge avec par exemple un "left: 50px" à la place du margin-left ?

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>

    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 50px;
    }
    #blue{
         position: absolute;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: absolute;
         width:50px;
         height: 50px;
         background-color: red;
         left: 50px;
    }

    Le carré rouge est alors placé en fonction du bord de la page qui l'entoure. Le carré rouge est placé en fonction de la page et non en fonction de la division qui l'entoure. Faites très attention à toujours contrôler vos blocs avec la position "absolute", essayez de toujours imbriquer un bloc en position "absolute" dans un bloc en position "relative".
    La position "absolute" est une notion assez difficile à comprendre, c'est pourquoi beaucoup de personnes vous déconseillerons de l'utiliser et de ne l'utiliser qu'en cas de dernier secours.


    La position fixed



    La position "fixed", c'est en réalité la même propriété que la position "absolute", avec un petit changement. Normalement (sans la position "fixed"), quand vous faites défiler la page web (de haut en bas, ou de gauche à droite) les différents blocs de votre page web/forum se déplace en conséquence.
    Et bien avec la position "fixed", ils ne se déplaceront plus avec la page, ils resteront là où vous leur avez dit de rester. C'est notamment cette position qui est utilisée pour les barres de menu sur de nombreux forum. Je ne peux pas vous faire de démonstration, sinon vous verriez un carré rouge et un carré bleu durant tout le tutoriel et ils vous masqueraient le tuto Wink.

    Il faut toujours définir la position d'un bloc fixe avec les propriétés "top" ou "bottom" et "right" ou "left".


    La position inherit



    Que dire sur la position "inherit"... ? Le bloc qui a pour position "inherit" va hériter de la position du bloc dit "parent". Comme un exemple vaut toujours plus qu'un long discours...

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue">
              <div ID="red"></div>
         </div>
    </div>
    Code:
    #container{
         position: relative;
         border: 1px black solid;
         width: 100px;
         height: 100px;
    }
    #blue{
         position: absolute;
         width:100px;
         height: 100px;
         background-color: blue;
    }
    #red{
         position: inherit;
         width:50px;
         height: 50px;
         top: 25px;
         left: 25px;
         background-color: red;
    }


    Ici, le bloc parent du carré rouge est le carré bleu. Ce carré bleu a pour position "absolute", alors la position du carré rouge est donc considéré comme "absolute".
    Personnellement, je n'ai quasi-jamais utilisé cette propriété de position, vous ne devriez pas souvent le croiser, mais il est toujours bon de savoir à quoi ça correspond ! : )


    La position relative



    C'est cette position que vous verrez le plus souvent. En utilisant cette position, vous pourrez placer votre bloc comme bon vous semble.  Les blocs avec cette position seront toujours placée en fonction des autres bloc se trouvant dans le même "espace".

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 50px;
         height: 100px;
    }
    #blue{
         position: relative;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: relative;
         width:50px;
         height: 50px;
         background-color: red;
    }

    Ici, c'est comme si je n'avais utilisé aucune position. Cependant, si j'avais fait un bloc "parent" moins grand que les deux blocs "enfant" qui sont en position relative, il y aurait eu un chevauchement entre les blocs "enfant" et le bloc "parent".

    Et comme nos carrés sont en position "relative", on va pouvoir les déplacer ! Un exemple tout bête, je déplace le carré rouge de 25px sur le haut et 25px sur la droite.

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 50px;
         height: 100px;
    }
    #blue{
         position: relative;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: relative;
         width:50px;
         height: 50px;
         background-color: red;
         top: -25px;
         left: 25px;
    }

    Ici, je n'ai pas redimensionné mon bloc "parent", cela a donc engendré un chevauchement.

    Alors, comment faire pour que nos blocs ne se chevauchent pas ? Et bien, il faut étendre le bloc "parent". Vous pouvez tout aussi bien mettre les valeurs width: 100px; et height: 100%; dans le bloc parent pour que celui-ci prenne la totalité de son contenu (attention, le travail avec les pourcentages peut être dangereux, une mauvaise manipulation et quand vous ou vos visiteurs aurez une autre résolution d'écran, ce sera la catastrophe, il n'y aura plus rien de proportionné.

    Exemple:



    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 100%;
    }
    #blue{
         position: relative;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: relative;
         width:50px;
         height: 50px;
         background-color: red;
         top: -25px;
         left: 25px;
    }

    Nous voyons alors une chose étrange. Le bloc parent descend plus bas que le carré rouge ! C'est normal, j'ai utilisé les propriétés "top" et "left", et celle-ci "n’interagisse" pas directement avec le bloc parent. Si j'avais voulus que mon bloc parent ai la bonne taille en hauteur, j'aurais utilisé des "margin".


    Le Z-Index



    A quoi sert le z-index ?
    Eh bien, le z-index associé à des positions comme "absolute", "fixed" et "relative", permet de définir quel bloc aura la priorité d'affichage sur l'autre lors d'un chevauchement.
    Quand le chiffre dans le z-index est plus élevé que celui d'un bloc se situant sur la même zone, c'est ce bloc qui sera alors affiché.

    Je m'explique, dans les précédents exemples, le carré rouge était passé par-dessus le carré bleu.

    Rappel:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 100%;
    }
    #blue{
         position: relative;
         width:50px;
         height: 50px;
         background-color: blue;
    }
    #red{
         position: relative;
         width:50px;
         height: 50px;
         background-color: red;
         top: -25px;
         left: 25px;
    }

    Si j'applique un z-index: 12; sur le carré bleu, et un z-index: 10; sur le carré rouge, le carré bleu passera devant le carré rouge.

    Exemple:


    Code:
    <div ID="container">
         <div ID="blue"></div>
         <div ID="red"></div>
    </div>
    Code:
    #container{
         border: 1px black solid;
         width: 100px;
         height: 100%;
    }
    #blue{
         position: relative;
         width:50px;
         height: 50px;
         background-color: blue;
         z-index: 12;
    }
    #red{
         position: relative;
         width:50px;
         height: 50px;
         background-color: red;
         top: -25px;
         left: 25px;
         z-index: 10;
    }

    Cette propriété peut-être très pratique et peut être amusante aussi. N'hésitez pas à faire des tests avec le z-index. Vous pouvez attribuer n'importe quelle valeur au z-index, mais essayez quand même de faire quelque chose de propre, par exemple, n'utilisez pas un z-index: 9999; sur un bloc pour qu'il soit au-dessus d'un bloc avec un z-index: 10; .

    Voici un exemple de ce que vous pouvez faire avec le z-index:



    Ceci est un ensemble de carré imbriqué de sorte qu'ils donnent une autre forme avec différentes nuances de bleu.


    Voir le tutoriel sur les transitions, par Angelusia


    Dernière édition par Scavenger le Mar 19 Mar 2013 - 14:43, édité 5 fois



    A-Lice
    FémininAge : 22Messages : 4939

    le Mer 25 Juin 2014 - 21:29

    J'ai une question, parce que je ne me suis jamais servi des positions. Mais le fait de ne pas en utiliser est-il gênant ?
    Ou alors ça applique automatiquement une position s'il n'y en a pas ?

    Qui a dit que les verts ne pouvaient pas progresser/s'améliorer ?

    Okhmhaka
    FémininAge : 31Messages : 31721

    le Jeu 26 Juin 2014 - 11:00

    C'est pas gênant en soi mais ça peut le devenir si tu cherches à faire quelque chose de précis et que tu bloques sur un placement de div par exemple.
    Si tu veux faire une navigation fixe collée en haut de page le positionnement est vital (c'est lui qui fixe). Si tu veux changer l'ordre de superposition de deux blocs c'est pareil tu as besoin de leur attribuer un "z-index" et celui-ci ne peut se mettre que si la position est déterminée. Si tu veux faire un système de bloc coulissant la position absolute est très utile^^
    Enfin tout ça pour dire que je trouve cette partie très utile, lorsqu'on connait un peu et qu'on a l'habitude de l'utiliser elle permet de faire plein de choses ! La page d'accueil du site de Never-Utopia n'est quasiment faite que de ça xD.



    A-Lice
    FémininAge : 22Messages : 4939

    le Jeu 26 Juin 2014 - 17:26

    Pour la position qui fixe je m'en doutais x) Mais je vais essayer d'appliquer des positions dorénavant, ne serait-ce que pour être capable de l'interpréter dans le code de quelqu'un d'autre !
    Merci de ta réponse Jack !

    Ayfoth
    MasculinAge : 26Messages : 1216

    le Dim 13 Sep 2015 - 0:25

    J'ai une question à propose de l'absolute, ça définit par rapport aux côtes des pages des navigateurs mais dans le cas d'une PA alors ca risque pas de poser problème si la taille de la bannière change ?



    Nihil Scar Winspeare
    Messages : 3942

    le Dim 13 Sep 2015 - 21:16

    Coucou Ayfoth :)

    Le position: absolute se place par rapport aux cotés de la page si il n'y a pas dans les parents (= dans les div autour) un élément avec position: relative :)

    S'il y a un élément autour avec une position en relative, les éléments en position: absolute vont se mettre par rapport à cet élément là (^-^)

    Pour la PA dont du parle par exemple, tu mets la div autour de ta PA en relative, puis tout à l'intérieur en absolute (^-^)

    Ce sujet peut peut-être t'aider → Mission #6 - Explique moi... les positions!




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Ayfoth
    MasculinAge : 26Messages : 1216

    le Dim 13 Sep 2015 - 21:22

    Ah d'accord je comprends mieux merci beaucoup ^^



    Contenu sponsorisé

    Aujourd'hui à 6:01


      La date/heure actuelle est Sam 10 Déc 2016 - 6:01