Traduction
Débuter en programmation web - sommaire
Débuter en programmation web - 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
Dans la page précédente 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 ?
Il faut utiliser conjointement avec position : fixed /absolute / relative les propriétés top (ou bottom)
et left (ou right).
Pour ces quatre propriétés la valeur peut être exprimée en pixels ou en % !
Attribuer position : fixed et z-index à la boite de navigationn permet à celle-ci d'être affichée en permanence
même lorque le visiteur fait défiler 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.
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" de départ à SECTION il faut positionner cette boite en "relatif" ; voir paragraphe suivant.
Le rendu du code dans un cadre :
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 la boite NAV.
L'objet est décalé en fonction des valeurs de top et de left par rapport à la position qu'il aurait du avoir normalement.
Donc si vous utilisez position : relative sans préciser top et left l'élément est positionné normalement !
Nous venons de voir dans le premier exemple de cette page que la zone de navigation était positonnée en fixe et la zone de contenu en relatif.
Tant que les propriétés text-shadow et box-shadow n'existaient pas, on utilisait beaucoup le positionnement relatif pour créer un effet d'ombre sur un élément.
On veut afficher une image qui fait 400 par 300 avec un effet d'ombre sans utiliser la propriété box-shadow. C'est ce qu'on appelle être "sado maso" (lol).
Le rendu du code dans un cadre :
L'image du nautile fait 400 par 300 comme la boîte DIV.
Dans la deuxième solution (la bonne) l'image ne recouvre pas complètement la boîte DIV.
Du fait de l'appel de la classe decale l'image est en effet décalée de 10 pixels par rapport à la position qu'elle aurait du avoir normalement.
Pour positionner en absolu une boite il faut utiliser trois propriétés : position, left (ou right) top (ou bottom).
Attention si la boite parente n'est pas elle-même positionnée en absolu (ou fixe ou relatif) les coordonnées de la boite "enfant"
sont déterminées par rapport à l'angle haut gauche de la fenêtre et non pas par rapport au coin haut gauche du conteneur parent.
Si vous voulez superposer des boites il faut utiliser le positionnement absolu. L'ordre d'empilement des boites est géré par la propriété z-index.
Dans l'exemple ci-dessous, la boite survolée passe au premier plan.
Le rendu du code dans un cadre :
Ici les coordonnées de left et top des boites "enfants" sont calculées par rapport à l'arête supérieure gauche de la boite conteneur car cette dernière est positionnée en relatif (#conteneur {position :relative;... }.
Les boites en couleurs se superposent partiellement dans l'ordre d'appel donné par le code HTML (3 sur 2 et 2 sur 1).
Si une boite en couleurs est survolée elle passe en premier plan (z-index passe à 999).
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 absolue 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 devez toujours utiliser le positionnement absolu. Le problème se pose lorsque vous devez superposer parfaitement plusieurs canevas dans le cadre de l'API Canvas : Animations canvas complexes