Le type de donnée CSS <position> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <position>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété background-position.

Syntaxe

On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera left, right, top, bottom ou center (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).

Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type <percentage> ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).

Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est center.

Valeurs

/* Syntaxe avec une valeur */
mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
<length> ou <percentage> /* La position sur l'axe */

/* Syntaxe avec deux valeurs */
mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */ 
valeur valeur            /* Une valeur pour chaque composante du décalage */

/* Syntaxe avec quatre valeurs */
mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */

Syntaxe formelle

[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]

Interpolation

Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation (<timing-function>) et le point se déplacera donc sur une ligne.

Exemples

CSS

div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

.exemple{
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
  // Ici un exemple de valeur <position>
  background-position:  2.5cm bottom;
}

HTML

<div class="exemple">Exemple</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 3
La définition de '<position>' dans cette spécification.
Candidat au statut de recommandation Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si CSS Backgrounds and Borders Module Level 3 est pris en charge, c'est sa définition de  <position> qui doit être utilisée.
CSS Backgrounds and Borders Module Level 3
La définition de '<position>' dans cette spécification.
Candidat au statut de recommandation <position> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.
CSS Level 2 (Revision 1)
La définition de '<position>' dans cette spécification.
Recommendation Autorise la combinaison d'un mot-clé et d'une valeur <length> ou <percentage>.
CSS Level 1
La définition de '<position>' dans cette spécification.
Recommendation <position> est défini de façon anonyme comme valeur de background-position.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Syntax combining a keyword and <length> or <percentage>Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Four-value syntax for offset from any edgeChrome Support complet 25Edge Support complet 12Firefox Support complet 13IE Support complet 9Opera Support complet 10.5Safari Support complet 7WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet 7.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,