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 :

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

Description de la propriété position.

position définit le mode de positionnement d'un élément : En fonctionnement normal, les éléments se positionnent 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 fixer 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é".

La propriété position fonctionne avec les propriétés top, right, bottom et left qui permettent de définir l'emplacement de l'élément et, éventuellement ses dimensions. Voici les règles de résolution des conflits en fonction des propriétés qui sont définies, pour ce qui est du positionnement et de la dimension horizontales :

ObjectObjectObject Position horizontale
définie par
Largeur
définie par
X Object.auto
X Object.auto
XX Object et Objectcalculée
X XObjectwidth
XXObjectwidth
XXXObjectwidth

On retrouve un fonctionnement analogue dans la direction verticale :

ObjectObjectObject Position verticale
définie par
Hauteur
définie par
X Object.auto
X Object.auto
XX Object et Objectcalculée
X XObjectheight
XXObjectheight
XXXObjectheight

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.

Attention ! La propriété position ne peut pas être appliquée aux colonnes de tableaux (balise col), ni aux groupes de colonnes (balise colgroup).

Syntaxes 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 Object, Object, Object et Object 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 Object, Object, Object et Object.

  • 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 Object, Object, Object et Object.

  • 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 Object, Object, Object et Object. 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 Object, Object, Object et Object 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 Object n'est pas définie, l'élément pourra disparaître par le haut de la page. Si Object n'est pas définie, l'élément pourra disparaître par le bas.

  • position: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

En position statique, le cadre 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. 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 place 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.

Enfin en mode sticky, le cadre défile avec la page tant qu'il reste visible. Il se fige en haut lorsque le défilement tend à la faire disparaître.

position :

 

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.

position sticky

Voir aussi...

Blocs positionnés - Propriétés.

  • bottom : Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
  • left : Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de son parent.
  • right : Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de son parent.
  • top : Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de son parent.
  • z-index : Plan d'affichage (dessus, dessous).