Position - Propriété CSS

Schéma syntaxique de position.

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.

Et les propriétés logiques équivalents :

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 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.

Un problème comparable peut se poser entre les propriétés top, bottom et 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).

Prise en charge de la langue.

La propriété position accepte également des valeurs logiques, qui s'adaptent au mode d'écriture de la langue. Il est ainsi possible d'utiliser les valeurs suivantes (avec leur correspondance en langue latine):

• 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 (top).
• 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 (right).
• 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 (bottom).
• 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 (left).

Ainsi que les deux propriétés résumées suivantes :

• inset-block : distance entre les bords de l'élément et les bords de l'objet de référence, dans la direction 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 la direction des lignes. Pour les langues latines, il s'agit de la direction horizontale.

Valeurs pour 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 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; (static) position: inherit; position: revert; position: revertLayer; position: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

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 avec la propriété position.

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.

Prise en charge de position par les navigateurs.

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.

Remarques :

(1) Support pour les éléments th, but not thead or tr.

1

Propriété
position

2

Valeur
sticky

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

1

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la propriété position.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Introduction de la propriété position dans la spécification du langage CSS, Version 2.
  Les valeurs suivantes sont acceptées : static, relative, absolute et fixed.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Éléments positionnés - Niveau 3

  La valeur sticky est ajoutée.
  

  07 Février 2012

  Document de travail.

  

  

  

Voir aussi, à propos du positionnement.

Les propriétés en rapport avec la positionnement (différent de static) sont regroupées dans le module CSS Positioned Layout Module. Les propriétés suivantes sont également décrites dans ce même module :

Propriétés :