Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
L'emploi de la propriété POSITION est subtil et se fait conjointement avec d'autres propriétés :
top (ou bottom) left (ou right), z-index, etc.
Dans un chapitre précédent, je vous ai montré que pour mettre de front plusieurs éléments de type "blocs" on utilisait
float : left / right OU display : inline-block.
Alors à quoi sert la propriété position ? Disons que son emploi est assez marginal.
Attribuer position : fixed et z-index à la zone de navigation permet à celle-ci d'être affichée en permanence
même lorque le visiteur "scrolle" vers le bas.
Je vous indique ci-dessous le code pour obtenir cette mise en page.
La boite NAV contient le titre du site et la zone de navigation.
Le contenu de chaque page est dans la boite SECTION ; ce contenu peut être très volumineux.
* {margin : 0px ; padding : 0px ; font-size : 20px; }
body {width : 100%; }
nav {background : lime; width : 100%; height : 100px ;
position : fixed; z-index : 999 ; top : 0px ; left :0px ;}
section {background : aqua ; width : 900px ;
position : relative ; top : 120px ;
margin : 0 auto ; z-index : 1 ; }
h2 {font-size : 1.5em ; text-align : center ; }
p {font-size : 1em ; text-align : justify ; }
a {display : inline-block ; width : 15% ;
margin :1%; font-size : 1.2em; }
La position de la boite NAV est fixe par rapport à l'angle haut gauche de l'écran !
Grâce à un positionnement fixe de la boite NAV combiné à un z-index : 999
ce bloc reste toujours affiché même lorsque vous faites défiler la page vers le bas.
En effet lorsque vous faites remonter le bloc SECTION, ce dernier glisse sous la boite NAV.
car son z-index est inférieur à celui attribué à la zone NAV.
Pour pouvoire donner un "top" initial à SECTION il faut positionner cette boite en "relatif".
Aperçu de la page dans un iframe :
Surtout utilisez la barre de défilement vertical pour bien vérifier que la zone de navigation est affichée en permanence. Lorsque vous défilez vers le bas alors le contenu de SECTION glisse sous NAV !
La boite est décalée par rapport à la position qu'elle devrait normalement occuper.
Trois classes pour un positionnement relatif mais seulement sur survol.
Par défaut les trois boites sont parfaitement alignées les unes sous les autres (position : static).
Sur survol il y décalage sur les deux axes par rapport à la position "static".
Dans le cadre du positionnement absolu on ne peut pas utiliser "margin : auto".
Afin que les coordonnées de la boite "enfant" soient calculées par rapport au coin haut gauche de son conteneur (et non pas
par rapport au coin haut gauche de la fenêtre) la boite "mère" doit elle aussi être positionnée en absolu (ou fixe ou relatif).
L'ordre d'empilement des boites peut être modifié par la propriété z-index.
Le CSS :
main {width : 60%; position : relative ; margin : auto ;
height : 400px ; border : 2px solid red; }
#boite1, #boite2, #boite3 {position :absolute ;
width : 40% ; height : 100px;}
#boite1 {background : yellow ; top : 50px ; left : 10% ; }
#boite2 {background : green ; top : 100px ; left : 20% ; }
#boite3 {background : red ; top : 150px ; left : 40% ; }
div:hover {z-index : 2 ; }
Le HTML :
Les DIV sont enfants de MAIN.
Notez bien la règle position : relative au niveau du sélecteur main
Dans l'exemple ci-dessous, la boite de couleur survolée passe au premier plan.
Une page "buggée" :
Bug : les boites de couleur se positionnent par rapport à l'angle haut gauche de la fenêtre !
Le code est strictement à la version précédente sauf que dans la règle relative au sélecteur MAIN j'ai oublié :
position : relative; .
Dès que vous envisagez d'utiliser le positionnement absolu dans une page web, ayez le réflexe d'affecter la règle position : relative au sélecteur body.
Le centrage horizontal d'une boite dans son conteneur n'a jamais posé de difficulté. Il suffit d'appliquer à
la boite un raccourci tel que : margin : 10px auto
Par contre le centrage vertical et horizontal est un casse-tête en CSS 2. En effet on pense à écrire
margin : auto auto mais ça ne marche pas ...
Je vous propose deux solutions pour un centrage parfait dans les deux directions.
Dans les deux cas le code HTML est identique et en plus fort simple.
main{ position : relative ; width : 80% ; border : 1px solid red;
height : 400px ; margin : 20px auto ; }
div{width : 60% ; height : 200px;
position : relative ;
margin : 0 auto;
top : 100px ;
background : pink ; }
MAIN fait 400 de haut et DIV fait 200 de haut donc pour un centrage vertical il faut que le top de la boite DIV soit de : (400-200) /2 =100.
main{ position : relative ; width : 80% ; border : 1px solid red;
height : 400px ; margin : auto ; }
#enfant {position : absolute ; width : 60% ; height : 200px;
top : 50% ; margin-top :-100px ;
left : 50% ; margin-left : -30%;
background : pink ; }
On doit donc utiliser margin-left / margin-right avec des valeurs négatives dont la valeur absolu est la moitié de la largeur de l'enfant.
Le rendu :
Tout ce que je viens d'évoquer est un mauvais souvenir.
Maintenant que l'outil flexbox est bien implémenté par les navigateurs vous pouvez utiliser cette technique
pour centrer V & H un "enfant" dans son parent.
Révolution dans le positionnement : outils flex box & gridlayout
Cependant si vous devez superposer plusieurs éléments de type block et les centrer, vous devrez utiliser le positionnement absolu. Cette problèmatique se pose entre autres dans le cadre de l'API Canvas. Animations canvas complexes