Les schémas de positionnement
En , trois schémas de positionnement peuvent déterminer l'emplacement d'une boîte : , trois peuvent déterminer l'emplacement d'une boîte :
- Le flux normal. En , celui-ci inclus le formatage en bloc des boîtes de bloc, le formatage en-ligne des boîtes en-ligne, le positionnement relatif des boîtes de bloc ou en-ligne, et le positionnement des boîtes compactes et en enfilade ; , celui-ci inclus le des boîtes , le des boîtes , le des boîtes de bloc ou en-ligne, et le positionnement des boîtes et ;
- Les flottants. Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, puis elle en est extirpée et repoussée le plus possible vers la droite ou la gauche. Le contenu peut s'écouler le long d'un flottant.
- Le positionnement absolue. Dans ce modèle, une boîte est complètement retirée du flux normal (elle n'a pas d'influence sur les éléments de même degré de parenté survenant après elle), et est positionnée en fonction d'un bloc conteneur.
Les propriétés 'position' et 'float' déterminent lequel des algorithmes de positionnement employer pour le calcul de l'emplacement d'une boîte.
- 'position'
-
Valeur : static | relative | absolute | fixed | inherit Initiale : static S'applique à : tous les éléments, sauf à un contenu généré Héritée : non Pourcentage : sans objet Médias : visuel
Les valeurs de cette propriété ont le sens suivant :
- static
- La boîte est normale, placée selon le flux normal. Les propriétés 'left', 'top', 'right' et 'bottom' ne s'y appliquent pas ;
- relative
- L'emplacement de la boîte est calculé selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée ;
- absolute
- L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges, celles-ci ne fusionnent pas avec d'autres marges ;
- fixed
- L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte est en plus fixe par rapport à une référence donnée. Pour les médias continus, par rapport à la zone de visualisation (la boîte ne bouge pas lors d'un défilement). Pour les médias paginés, par rapport à la page, même si celle-ci apparaît dans une zone de visualisation (par exemple lors d'un aperçu avant impression). Les auteurs peuvent souhaiter un tel comportement en fonction d'un média donné. Par exemple, une boîte qui reste fixe en haut d'une zone de visualisation sur un écran, mais pas en haut de chaque page imprimée. Ils peuvent indiquer des spécifications séparées à l'aide d'une règle @media comme ceci :
Exemple(s) :
@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }
« errata : Voir la proposition pour la nouvelle valeur 'static-position' »
On dit qu'un élément est positionné quand la valeur de sa propriété 'position' est autre que 'static'. Ces éléments génèrent des boîtes positionnées qui sont disposées selon les quatre propriétés suivantes :
- 'top'
-
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto S'applique à : ceux des éléments positionnés Héritée : non Pourcentage : se rapporte à la hauteur du bloc conteneur Médias : visuel
Cette propriété définit le décalage du bord haut du contenu de la marge d'une boîte sous le bord haut de la boîte du bloc conteneur.
- 'right'
-
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto S'applique à : ceux des éléments positionnés Héritée : non Pourcentage : se rapporte à la largeur du bloc conteneur Médias : visuel
Cette propriété définit le décalage du bord droit du contenu de la marge d'une boîte à gauche du bord droit de la boîte du bloc conteneur.
- 'bottom'
-
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto S'applique à : ceux des éléments positionnés Héritée : non Pourcentage : se rapporte à la hauteur du bloc conteneur Médias : visuel
Cette propriété définit le décalage du bord bas du contenu de la marge d'une boîte au-dessus du bord bas de la boîte du bloc conteneur.
- 'left'
-
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto S'applique à : ceux des éléments positionnés Héritée : non Pourcentage : se rapporte à la largeur du bloc conteneur Médias : visuel
Cette propriété définit le décalage du bord gauche du contenu de la marge d'une boîte à droite du bord gauche de la boîte du bloc conteneur.
Les significations des valeurs de ces quatre propriétés sont :
- <longueur>
- Le décalage est représenté par une distance fixe à partir du bord de référence ;
- <pourcentage>
- Le décalage est représenté par un pourcentage de la largeur du bloc conteneur (pour les propriétés 'left' et 'right') ou la hauteur de celui-ci (pour les propriétés 'top' et 'bottom'). Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (par exemple celle-ci dépendant de la hauteur du contenu), les propriétés 'top' et 'bottom' sont censées avoir la valeur 'auto' ;
- auto
- L'effet de cette valeur dépend des propriétés associées, lesquelles ont aussi cette même valeur 'auto'. Voir les passages traitant de la largeur et de la hauteur des éléments non-remplacés en position absolue.
Pour les boîtes en position absolue, les décalages sont déterminés par rapport à la boîte du bloc conteneur. Pour les boîtes en position relative, ils sont déterminés par rapport aux bords externes de la boîte elle-même (c.à.d., la boîte reçoit un emplacement dans le flux normal, puis elle est décalée de cet emplacement en fonction des valeurs des propriétés de position).