position - Propriété CSS
Résumé des caractéristiques de la propriété position
column
, column-group
...).static
| relative
| absolute
| sticky
| fixed
static
position
passe d'une valeur à l'autre sans transition.Description de la propriété position
.
position
est une propriété du langage CSS, parmi les plus importantes. Elle détermine suivant
quelle logique doit être positionné un élément sur une page web. Doit-il défiler avec le reste du contenu ?
Doit-il être fixe ? Et par rapport à quoi (la page, la fenêtre) ? Etc.
sans indication contraire, les éléments se positionnent par défaut en fonction de leur ordre d'arrivée dans le fichier HTML.
Les premiers éléments rencontrés se placent en haut de la page et les suivants en dessous.
Le dernier élément se retrouve donc en bas de la page.
La propriété position
permet de choisir une autre logique pour calculer l'emplacement d'un élément sur la page,
indépendamment de sa position dans le fichier HTML : l'élément peut donc se retrouver n'importe où sur la page.
Cet élément est dit "positionné".
position
définit l'objet de référence par rapport à quoi l'élément doit être positionné (la page, la fenêtre du navigateur, etc.).
L'emplacement précis est ensuite défini par une ou plusieurs des propriétés physiques suivantes.
top
: distance entre le bord haut de l'élément et le haut de l'objet de référence.right
: distance entre le bord droit de l'élément et le bord droit de l'objet de référence.bottom
: distance entre le bord bas de l'élément et le bas de l'objet de référence.left
: distance entre le bord gauche de l'élément et le bord gauche de l'objet de référence.
Ou par une ou plusieurs des propriétés logiques suivantes (les propriétés logiques sont dépendantes du sens et de la direction d'écriture) :
inset-block
: distance entre les bords de l'élément et les bords de l'objet de référence, dans le sens des blocs. Pour les langues latines, il s'agit de la direction verticale.inset-inline
: distance entre les bords de l'élément et les bords de l'objet de référence, dans le sens des lignes. Pour les langues latines, il s'agit de la direction horizontale.inset-block-start
: distance entre le bord de l'élément situé en début des blocs et le bord correspondant de l'objet de référence. Pour les langues latines, il s'agit du haut.inset-block-end
: distance entre le bord de l'élément situé à la fin des blocs et le bord correspondant de l'objet de référence. Pour les langues latines, il s'agit du bas.inset-inline-start
: distance entre le bord de l'élément situé au début des lignes et le bord correspondant de l'objet de référence. Pour les langues latines, il s'agit du bord gauche.inset-inline-end
: distance entre le bord de l'élément situé à la fin des lignes et le bord correspondant de l'objet de référence. Pour les langues latines, il s'agit du bord droit.
Résolution des conflits sur les dimensions de l'élément.
Si la position du bord gauche et celle du bord droit d'un élément sont toutes les deux définies, la largeur de l'élément
la largeur de l'élément se trouve imposée. Mais cela peut entrer en conflit avec la valeur donnée à la propriété width
.
Voici comment ce conflit se résout. les X
indiquent les propriétés qui sont définies pour l'élément.
left | right | width |
Position horizontale définie par | Largeur définie par |
X | left | auto | ||
X | right | auto | ||
X | X | left | calculée | |
X | X | left | width | |
X | X | right | width | |
X | X | X | left | width |
Un problème comparable peut se poser entre les propriétés top
, bottom
et height
.
top | bottom | height |
Position verticale définie par | Hauteur définie par |
X | top | auto | ||
X | bottom | auto | ||
X | X | top | calculée | |
X | X | top | height | |
X | X | bottom | height | |
X | X | X | top | height |
Superposition des éléments.
Les éléments positionnés peuvent se superposer entre eux ou se superposer au contenu non positionné de la page.
Dans ce cas, la propriété z-index
définit l'ordre de superposition : lequel des éléments sera au-dessus.
Remarques.
Attention ! La propriété position
ne peut pas être appliquée aux colonnes de tableaux (balise col),
ni aux groupes de colonnes (balise colgroup).
Pour approfondir cette notion d'éléments positionnés, vous pouvez vous reporter à la description des propriétés physiques
(top
, right
, bottom
et left
) et à la description des propriétés logiques
(inset-block
, et les propriétés individuelles correspondantes).
Syntaxes pour position
.
position:
;
- position: static;
Valeur par défaut. Les éléments se positionnent les uns à la suite des autres, en fonction de leur ordre dans le document HTML. Les propriétés
top
,right
,bottom
etleft
sont sans effet. - position: absolute;
Le positionnement de l'élément se fait par rapport au parent le plus proche qui soit lui-même positionné, en remontant dans l'arbre. S'il n'y a pas d'autre élément positionné, la référence sera le body. La position exacte, et éventuellement les dimensions de l'élément, sont définies par les propriétés
top
,right
,bottom
etleft
. - position: fixed;
Le positionnement de l'élément se fait par rapport à la fenêtre d'affichage. L'élément ne défilera donc pas avec la page. Sa position, et éventuellement ses dimensions sont définies par les propriétés
top
,right
,bottom
etleft
. - position: relative;
Le positionnement de l'élément est décalé par rapport à la position qu'il aurait eu normalement (en mode
static
). Ce décalage est défini par les propriétéstop
,right
,bottom
etleft
. L'élément défile avec la page. - position: sticky;
L'élément défile avec la page tant que cela lui permet de rester visible. Les propriétés
top
,right
,bottom
etleft
servent de butée. Par exempletop:10px;
bloquera l'élément à 10 pixels du haut de la fenêtre d'affichage, tandis quebottom:0;
bloquera l'élément au bas de la fenêtre d'affichage.
Sitop
n'est pas définie, l'élément pourra disparaître par le haut de la page. Sibottom
n'est pas définie, l'élément pourra disparaître par le bas. La valeur initiale est :
.static
Exemple.
Un exemple concret du positionnement sticky
est notre index alphabétique.
Il se trouve dans la partie gauche de l'écran sur un ordinateur de bureau (écran de 600 pixels minimum en largeur).
Sur un mobile cet accessoire n'est pas visible.
En faisant défiler la page vers le haut ou vers le bas, vous constaterez que cet élément ne disparaît jamais.
Animation de la propriété position
.
L'animation la propriété position
position est possible mais ne présente pas beaucoup d'intérêt visuel .
Vous trouverez des exemples d'animation plus pertinents sur la page des propriétés left
, top
, etc.
ou sur les propriétés logiques équivalentes : inset-block
, inset-inline
, etc.
Simulateur.
Le simulateur permet de voir ce qui se passe quand on change la valeur de la propriété position
du bloc "Démonstration".
Les dimensions de cet élément ont été définies. Il peut donc se déplacer mais ne changera pas de taille.
- En position statique (qui est la valeur par défaut de tous les éléments), le cadre "Démonstration" défile avec le reste de la page.
- En position absolue, il se positionne tout en haut de la page, par dessus le contenu existant.
Vous devrez remonter en haut de la page pour le voir.
Sa position est fonction des propriétés
left
ettop
qui, sur cet exemple, sont toutes les deux fixées à10px
. - En position fixe, le cadre se positionne par rapport à la fenêtre en ne défile pas.
- La position relative provoque simplement un petit décalage du cadre de 10 pixels, conformément aux propriétés
left
ettop
toujours fixées à10px
. - Enfin en mode
sticky
, le cadre défile avec la page tant qu'il reste visible. Il se fige en haut ou en bas lorsque le défilement tendrait à le faire disparaître.
Prise en charge par les navigateurs (compatibilité).
La propriété position
est très bien prise en compte par tous les navigateurs, y compris la valeur sticky
plus récente dans les spécifications.
position
par les navigateurs.
sticky
dans la syntaxe de position
.
position
sticky
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que position
.
Les spécifications CSS éditées par le W3C sont organisées en modules. position
fait partie du Module CSS - Éléments positionnés (CSS Positioned Layout Module). Les définitions suivantes sont également décrites dans ce même module.