La propriété Css position permet d'agir sur le positionnement du bloc concerné dans le flux d'affichage du navigateur. La description des valeurs possibles de cette propriété css permet de mieux comprendre son action.

position: static;

Il s'agit du positionnement par défaut.

position: relative;

Chaque bloc se positionne dans le flux par rapport à son positionnement normal dans le flux.

position: fixed

La boîte est retirée du flux normal. Elle est positionnée par rapport au conteneur initial (c'est à dire par rapport à la fenêtre d'affichage du navigateur).

Avec ce code, la boîte d'identifiant id="enHautadroite" sera placée en haut à droite de la fenêtre (et y reste même lorsqu'on descend dans la page). C'est le cas du menu de navigation qui reste fixé ci-contre. Il faut alors déclarer des propriétés left, right, top ou bottom pour indiquer où positionner le conteneur.

position : absolute

La boîte est retirée du flux normal. Elle se positionne par rapport au premier ancêtre (conteneur, en remontant l'arbre DOM) lui-même déclaré en position relative ou absolute (ce qui explique que l'on déclare souvent des blocs en position: relative; sans déclarer de position afin que ce bloc soit bien le référentiel dans un placement absolu de ses fils).

Des sites pour se former

• page w3schools pour position
• alsacreation
• pompage
• openclassroom

L'objectif de cet exercice est d'observer les comportements.

En commentant/décommentant les sélecteurs de paragraphes p, tester les divers positionnements possibles vis-à-vis du div conteneur. Observer alors :

• les divers problèmes (débordement du conteneur, blocs se superposant, ...) ;
• la différence d'alignement entre float: left; et display: inline-block; (cf la page sur les flottants) ;
• ce qu'il se passe lorsqu'on modifie min-height en height pour le div:last-of-type.

On a placé ci-dessous la boîte verte dans la boîte orange avec une position absolue top:50%; left:50%; dans l'espoir de centrer la boîte verte dans l'orange. Mais ce n'est pas le centre de la boîte verte qui est ainsi placée au centre de la boîte orange :

• top:50%; place le bord supérieur de la petite boîte au milieu de la hauteur de la grande.
• left:50%; place le bord gauche de la petite boîte au milieu de la grande.

Modifiez le code Css pour que les centres des deux boîtes se superposent. Pour cela, utilisez des marges négatives.

On reprend le code de l'exercice précédent, avec le même objectif mais une autre méthode.

Cherchez cette fois à résoudre le problème d'un centrage (sur le centre de la boîte comme précédemment) à l'aide des transformations (translate).

• Dans le code ci-dessous, quel est le référentiel pour le placement absolu des fils ?
• Modifier le code pour que le placement absolu (premier fils) se fasse par rapport au père.

Définir le Css permettant d'obtenir une image équivalente à celle ci-contre :