Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

position - Propriété CSS

position

Résumé des caractéristiques de la propriété position

Description rapide
Mode de positionnement.
Statut
Standard
S'applique à
Tous les éléments sauf les constituants d'un tableau (column, column-group...).
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
static | relative | absolute | sticky | fixed
Pourcentages
Ne s'appliquent pas.
Valeur initiale
static
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété position passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Éléments positionnés
Références (W3C)
Statut du document:: WD (document de travail)

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.

leftrightwidth Position horizontale
définie par
Largeur
définie par
X left auto
X rightauto
XX left calculée
X Xleft width
XXrightwidth
XXXleft width

Un problème comparable peut se poser entre les propriétés top, bottom et height.

topbottomheight Position verticale
définie par
Hauteur
définie par
X top auto
X bottomauto
XX top calculée
X Xtop height
XXbottomheight
XXXtop 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:
 static static absolute absolute fixed fixed relative relative sticky sticky
;
  • 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 et left 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 et left.

  • 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 et left.

  • 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és top, right, bottom et left. 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 et left servent de butée. Par exemple top:10px; bloquera l'élément à 10 pixels du haut de la fenêtre d'affichage, tandis que bottom:0; bloquera l'élément au bas de la fenêtre d'affichage.
    Si top n'est pas définie, l'élément pourra disparaître par le haut de la page. Si bottom n'est pas définie, l'élément pourra disparaître par le bas.

  • position: initial; position: inherit; position: revert; position: revert-layer; position: unset;

    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 et top 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 et top 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.
position :
Démonstration

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.

Colonne 1
Support de la propriété position par les navigateurs.
Colonne 2
Support de la valeur sticky dans la syntaxe de position.
1
position
2
sticky
Estimation de la prise en charge en pourcentage du parc actuel.
95%
92%

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.

Propriétés.

Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
Pur un élément positionné, définit l'emplacement du côté fin de block.
Définit l'emplacement d'en élément positionné.
Sur un élément positionné, définit l'emplacement du bord situé en fin de ligne.
Pour un élément positionné, définit l'emplacement du côté début de ligne.
Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de son parent.
Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de son parent.
Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de son parent.
Plan d'affichage (dessus, dessous).