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 ?

superposer plusieurs boites
centrer H & V une boite dans son conteneur
ancrer une boite par rapport à l'écran
créer un effet 3D compatible avec de vieux navigateurs qui ignore la propriété box-shadow

position

static (valeur par défaut) : positionnement normal (dans le flux : les boites se placent les unes en dessous des autres)
fixed : position par rapport à l'écran
absolute : position par rapport au bloc conteneur
relative : position décalée par rapport au positionnement normal

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)

...
<body>
	<nav>
		<h2>Titre du site</h2>
		<a href ="#" >Lien 1</a>
		<a href ="#" >Lien 2</a>
		<a href ="#" >Lien 3</a>
		<a href ="#" >Lien 4</a>
		<a href ="#" >Lien 5</a>
	</nav>
	<section>
	<p>Alii nullo quaerente vultus severitate adsimulata ...
	ut puta feracium multiplicantes annuos fructus, 
...
</section>
...

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

* {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-left : auto ; margin-right : 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".

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

...
div {width : 60%; height : 100px ; border : 5px dotted red;  margin : 20px auto; background : lime;}
.boite1:hover{position:relative ; top : -20px ; left : 20px; background : silver;}
.boite2:hover {position:relative ; top : 20px ; left : 20px; background : gold;}
.boite3:hover {position:relative ; top : -30px ; left : -30px; background : purple;  }
...
	<div class ="boite1" ></div>
	<div class ="boite2"></div>
	<div class ="boite3"></div>
...

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

...
<style>
	body {position : relative; width : 90% ; height : 400px ; 
		margin :auto ; border : 1px solid black;}
	#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 : 999; }
...
<body>
		<div id ="boite1"></div>
		<div id ="boite2"></div>
		<div id ="boite3"></div>
...

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

...
<style>
main{ position : relative ; width : 100% ; border : 1px solid red; height : 400px ; margin : 20px auto ; }
div{width : 60% ;  height : 200px;
		position : relative ; 
		margin-left : auto ; margin-right : auto;
		top : 100px ; 
		background : pink ; } 
...
<main>
	<div>
		<p>Post hanc adclinis Libano monti Phoenice, ...
</main>	
...

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

...
<style>
	main{ position : relative ; width : 100% ; 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 ; } 
...
<body>
<main>
	<div id ="enfant">
		<p>Post hanc adclinis Libano monti ...
	</div>
</main>	
...

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

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS2 : la propriété position

Positionnement fixe

Le code HTML (extrait)

La feuille de style

Le rendu

Positionnement relatif

Le code CSS & HTML de l'exemple

Aperçu de la page dans un iframe

Positionnement absolu

Le code de l'exemple

Le rendu

Centrage horizontal et vertical d'un boite dans son conteneur

Première solution avec positionnement relatif

Code CSS & HTML

Le rendu

Deuxième solution avec positionnement absolu

Le code

Le rendu

Remarque