• Positionnement suite : POSITION RELATIVE

    En position relative, un élément peut être décalé verticalement et/ou horizontalement.
    Le positionnement relatif permet d'inscrire un contenu balise en flux normal, les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale, ce qui peut donc entraîner des chevauchements.
    Le positionnement relatif s'applique aux balises inline & block.
    4 propriétés : left / right / top / bottom

    En HTML :
    Exemple élément inline (span):
    <p>Lorem<span class="jauneRelative"> un span position: relative; bottom:5px; left:10px;</span> ipsum dolor.</p>

    Exemple éléments block (div):
    <div class="containerEx">
    <div class="gris">dans le flux</div>
    <div class="jauneRelative">
    une div en position:relative; bottom:5px; left:10px;
    </div>
    <div class="gris">3ème bloc / dans le flux</div>
    </div>

    En CSS :
    .jauneRelative {
    position: relative;
    bottom: 5px;
    left:10px;
    background-color: #ffff00;
    }
    .gris {
    background-color: #ddd;
    }
    Exemple élément inline (span):
    Loremun span position: relative; bottom:5px; left:10px; ipsum dolor.




    Exemple éléments block (div):
    dans le flux
    une div en position: relative; bottom:5px; left:10px;
    3ème bloc / dans le flux

    Attribuer à un élément une position relative peut s'avérer indispensable pour les situations suivantes:

    • Servir de référent à un élément enfant positionné en absolu (un élément positionné en absolute, le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné)
    • Bénéficier de l'utilisation de la superposition d'éléments avec la propriété z-index disponible que pour les éléments positionnés.

  • Position absolute

    position:absolute permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants que nous avons déjà vu.
    L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient.
    Il faut voir le positionnement absolu comme étant une méthode radicale (mais puissante) qui retire tout à fait un élément du flux:
    il n'existe plus aux yeux des éléments qui, eux, restent dans le flux.
    4 propriétés : left / right / top / bottom

    Un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.
    S'il n'a aucun parent positionné, il le fera par rapport à la fenêtre du navigateur.
    Un élément en position:absolute; sera donc positionné par défaut en top:0; left:0;
    tant que l'une des propriétés top, bottom, left ou right n'aura pas été précisée.
    L'élément, n'étant plus dans le flux naturel, il perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.

    En HTML :
    <div class="containerEx">
    <div class="jaune">dans le flux</div>
    <div class="grayAbsolute">
    position: absolute; top:10px; right:15px;
    </div>
    <div class="jaune">3ème bloc / dans le flux</div>
    <div class="blueAbsolute">
    position: absolute; top:30px; right:10px; z-index:2;
    </div>
    </div>

    En CSS :
    .containerEx {
    border:2px dashed #EE82EE;
    height:180px;
    position:relative;
    }
    .grayAbsolute {
    position: absolute;
    top:10px ;
    right:15px ;
    background-color: #ffff00;
    z-index:1;
    }
    .blueAbsolute {
    position: absolute;
    top:30px;
    right:10px;
    width:150px;
    height:140px;
    background-color: #ffff00;
    z-index:2;
    }
    position:relative + position:absolute
    dans le flux
    position: absolute ; top:10px; right:15px; z-index:1;
    3ème bloc / dans le flux
    position: absolute; top:30px; right:10px; z-index:2;
    z-index sert ici à jouer entre les profondeurs des éléments positionnés en absolu.

    Un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée; Ce comportement est appliquable à toutes les positions.

  • Position fixed

    Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe.

    CSS
    .menufixe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #000000;
    text-align: center;
    background-color: #ffffff;
    line-height: 2em;
    }
    .content {
    width: 50%;
    margin:0 auto; padding-top: 2em;
    }
    HTML
    <body> <div class="content">
    …
    </div>
    <p class="menufixe">
    …
    </p>
    </body>

    Voir le résultat

  • Exos positionnement
    Exercice 1
    1/ HTML - Faire 4 div contenant le texte suivant :
    - bloc 1
    - bloc 2
    - bloc 3
    - bloc 4

    2/ CSS – faire 4 classes nommées respectivement : bloc1, bloc2, bloc3, bloc4 et attribuées-les à chacune des div.

    3/ Toutes les class sont en position absolue.

    4/ CSS bloc1 :
    - largeur : 300px
    - hauteur : 300px
    - couleur de fond : bleue
    - décalage par rapport au haut : 20px
    - décalage par rapport à la gauche : 20px

    5/ CSS bloc2 :
    - largeur : 300px
    - hauteur : 300px
    - couleur de fond : rouge
    - décalage par rapport au haut : 220px
    - décalage par rapport à la gauche : 220px

    6/ CSS bloc3 :
    - largeur : 300px
    - hauteur : 300px
    - couleur de fond : verte
    - décalage par rapport au haut : 20px
    - décalage par rapport à la gauche : 420px

    7/ CSS bloc4 : - largeur : 300px
    - hauteur : 300px
    - couleur de fond : jaune
    - décalage par rapport au haut : 120px
    - décalage par rapport à la gauche : 470px

    8/ Faites que le texte soit visible, ajouter une ombre portée et un survol changeant la couleur pour chacune des div.

    9/ Faites que le bloc2 soit au dernier plan, la bloc1 soit au 3ème plan, la bloc3 soit au premier plan et la bloc4 soit au 2ème plan.

    Exercice 2
    1/ HTML - Faire 4 div contenant le texte suivant :
    bloc en flux normal
    bloc en position absolue
    bloc en position relative
    bloc en position fixe

    2/ CSS – faire 4 classes nommées respectivement : fluxNormal, blocAbsolute, blocRelative et blocFixed et attribuées-les à chacune des div.

    3/ CSS pour le body :
    - couleur de fond

    4/ CSS class fluxNormal :
    - couleur de fond
    - couleur de texte
    - bordure tirets
    - marge intérieure 10px
    - Remplir par du faux-texte (4 paragraphes)
    - largeur 500px / hauteur 600px et centrer horizontalement

    5/ CSS class blocAbsolute :
    - couleur de fond
    - couleur de texte
    - position absolue
    - décalage par rapport au haut : 30px
    - décalage par rapport à la gauche : 200px
    - hauteur 200px

    6/ CSS class blocRelative :
    - couleur de fond
    - couleur de texte
    - position relative
    - décalage par rapport au haut : 30px
    - décalage par rapport à la gauche : 50px

    7/ CSS class blocFixed
    - couleur de fond
    - couleur de texte
    - position fixe
    - décalage par rapport au haut : 120px
    - décalage par rapport à la gauche : 20px

    8/ S’il n’y a pas de barre de défilement sur la droite, augmenter la hauteur du bloc fluxNormal en y ajoutant du texte.

    exercice 3:
    Reproduire le visuel

    Suite exos

    Correction exo 01

    Correction exo 02

    Correction exo 03

    Correction exo 05

    Correction exo 06

    Correction exo 06