position

Résumé

La propriété CSS position choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.

Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, ou fixed.

Un élément positionné en absolu est un élément dont la propriété de position calculée est absolute ou fixed.

Les propriétés top, right, bottom et left spécifient la position des éléments positionnés.

Syntaxe

property: static | relative | absolute | fixed | inherit

Valeurs

static 
Comportement normal (par défaut).
relative 
Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).
absolute 
Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à son plus proche ancêtre positionné ou au bloc contenant initial [Ndt: s'il est lui même positionné].
fixed 
Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page ).

Exemples

Notes

Pour les éléments en position relative, les propriétés top ou bottom spécifient le décalage vertical depuis la position normale et les propriétés left ou right spécifient le décalage horizontal.

Pour les éléments en position absolue, les propriétés top, right, bottom et left spécifient les décalages depuis le bord du bloc ancêtre positionné contenant l'élément (à partir duquel l'élément est positionné relativement). La marge de l'élément est alors positionnée à l'intérieur de ces décalages.

La plupart du temps, les éléments positionnés en absolu ont une valeur auto pour height et width calculée pour ajuster le contenu de l'élément. Cependant, des éléments non remplacés positionnés en absolu peut être conduits à remplir l'espace disponible en spécifiant (avec une valeur autre que auto) top et bottom et en laissant height non défini (donc valeur auto). Idem pour left, right et width.

Sauf pour les cas, juste décrits ci-dessus, des éléments positionnés en absolu remplissant l'espace disponible:

  • Si top et bottom sont toutes deux spécifiées (techniquement, différentes de auto), top prédomine.
  • Si left et right sont toutes deux spécifiées, left prédomine lorsque la direction est ltr (Left To Right : de gauche à droite, français, anglais, aponais horizontal, etc) et right prédomine lorsque la direction est rtl (Right To Left : de droite à gauche, arabe, hébreu, etc).

Spécifications

Compatibilité des navigateurs

Voir également

display, float, top, right, bottom, left

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : FredB, Fredchat, Kyodev, Mgjbot
Dernière mise à jour par : FredB,
Masquer la barre latérale