Résumé

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

• Valeur initiale : static
• S'applique à : tous les éléments
• Héritée : non
• Média : Visuel
• Valeur calculée : comme spécifiée

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

• CSS 2 (fr)
• CSS 2.1 (en)

Compatibilité des navigateurs

Voir également

display , float , top , right , bottom , left