Accueil

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

CSS2 : la propriété position

Attention il s'agit d'un chapitre un peu difficile ; l'emploi de la propriété POSITION est subtil et se fait conjointement avec d'autres propriétés : top, left, z-index, etc.

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 % !

Positionnement fixe

Attribuer position : fixed et z-index à la zone de navigation 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.

Le code HTML (extrait)

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 feuille de style

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".

Le rendu

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 !

Positionnement relatif

La boite est décalée par rapport à la position qu'elle devrait normalement occuper.
Les boites peuvent alors se superposer ...

Le code CSS & HTML de l'exemple

Trois classes pour un positionnement relatif mais seulement sur survol.

Aperçu de la page dans un iframe

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".

Positionnement absolu

Pour positionner en absolu une boite il faut utiliser trois propriétés : position, left (ou right) top (ou bottom).

Dans le cadre du positionnement absolu, les propriétés préfixées margin- ne peuvent être utilisées avec la valeur "auto" !
Attention si la boite parente n'est pas elle-même positionnée en absolu /fixe /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.


L'ordre d'empilement des boites peut être modifié par la propriété z-index.
Dans l'exemple ci-dessous, la boite survolée passe au premier plan.

Le code de l'exemple

Ici les coordonnées de left et top des boites "enfants" sont calculées par rapport à l'arête supérieure gauche de BODY (le conteneur) car il est lui-même positionné en relatif.

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 rendu

Centrage horizontal et vertical d'un boite dans son conteneur

Le centrage horizontal d'une boite dans son conteneur n'a jamais posé de difficulté. Il suffit d'appliquer à l'élément "block" enfant les propriétés margin-left : auto & margin-right : auto OU utiliser le raccourci margin. Exemple : margin(10px auto) : marges haute et basse de 10px et centrage horizontal.

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 ...

La solution consiste à utiliser le positionnement relatif et de faire un calcul.

Première solution avec positionnement relatif

Code CSS & HTML

Main fait 400 de haut et DIV fait 200 de haut donc pour un centrage vertical il que la valeur de top pour la boite enfant soit de : (400-200) /2 =100.

Le rendu

Deuxième solution avec positionnement absolu

Problèmatique : dans le cadre du positionnement absolu, on ne peut pas attribuer la valeur "auto" à margin-left & margin-right.

Le code

La boite à centrer H & V fait 60% par 200px donc
centrage horizontal : left : 50% ; margin-left : -30%
centrage vertical : top : 50% ; margin-top :-100px

Le rendu

Remarque

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 & gridlayout