En CSS, une boite peut être affiché selon 4 schémas :

• Flux normal : le flux normal inclus des boites de bloc formatées en BLOCK, des boites en-ligne formatées en INLINE et des boites positionnée en RELATIVE soit BLOCK, soit INLINE.

• Flottant : dans le modèle flottant, une boite est d'abord affichée selon le flux normal et ensuite sortie du flux et décalée à gauche ou à droite aussi loin que possible. Le contenu peut flotter autour du bord de l'élément flottant.

• Position absolue : dans ce modèle, la boite est sortie complètement du flux normal et assignée à la position déterminée par le style.

• Position : sticky : L'élément accompagne le reste du texte jusqu'à la limite précisée (par top en général) et se bloque (sticky = gluant).

Un élément est appelé hors du flux si il flotte, en position absolue ou si c'est un élément racine. Le flux d'un élément A est une combinaison des propriétés de A et de tous les éléments du flux dont le plus proche ascendant hors flux est A.

top - right - bottom - left

Les propriétés suivantes précisent :

• Pour les éléments positionnés de manière absolue (ceux avec position: absolute ou position: fixed), elle spécifie la distance entre le bord de la marge supérieure de l'élément et le bord supérieur du bloc contenant.

• Pour les éléments positionnés de manière relative (ceux avec position: relative), elle spécifie la quantité dont l'élément est déplacé en dessous de sa position normale.

top : valeur | pourcentage | auto

right : valeur | pourcentage | auto

bottom : valeur | pourcentage | auto

left : valeur | pourcentage | auto

float

float : none | left | right

Le bloc flotte à gauche ou à droite et le reste du texte s'enroule autour.

Image : style="float : left ; margin-right : 20px" src="images/Flag_blue.png" width="48" height="48".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

clear

clear : none | left | right | both

Annule l'effet d'enroulement à gauche, à droite ou les deux.

Image : style="float : left" src="images/mecs.png" width="128" height="128". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Arrêt du flottement : style="clear : left"

position

position : static | relative | absolute | fixed | sticky

Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, ou fixed.

Un élément positionné en absolu est un élément dont la propriété de position calculée est absolute ou fixed.

Les propriétés top, right, bottom et left spécifient la position des éléments positionnés.

• position : static : Comportement normal (par défaut). TOP, RIGHT, BOTTOM et LEFT ne s'appliquent pas en STATIC.

• position : relative : Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).

• position : absolute : Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relativement à son plus proche ancêtre positionné ou au bloc contenant initial, s'il est lui même positionné.

• position : fixed : Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée, relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page ).

• position : sticky : L'élément accompagne le reste du texte jusqu'à la limite précisée (par top en général) et se bloque (sticky = gluant).

Exemple : #glue {position: sticky ; top: 150px ; }

Exemple : DIV avec style="position : absolute ; top : 1300px ; right : 10px ; width : 300px ; height : 10em ; border : medium groove yellow ; background-color : yellow ; overflow: scroll"

et l'image : style="position : absolute ; top : 60px ; left : 30px ;" src="images/Flag_blue.png" width="48" height="48" >

la position de la boite (et éventuellement sa taille) est spécifiée par TOP, RIGHT, BOTTOM et LEFT. Ces propriétés spécifient le déplacement dans le respect du bloc contenant. Les boites en position absolue sortent du flux normal. Cela signifie qu'il n'y aura aucun impact sur l'emplacement de leurs descendants.

z-index

z-index : auto | integer