diff options
Diffstat (limited to 'files/fr/web/css/position_value')
| -rw-r--r-- | files/fr/web/css/position_value/index.md | 94 |
1 files changed, 45 insertions, 49 deletions
diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md index 0437058c5d..28cdfc27a5 100644 --- a/files/fr/web/css/position_value/index.md +++ b/files/fr/web/css/position_value/index.md @@ -1,22 +1,25 @@ --- title: <position> slug: Web/CSS/position_value -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/position_value original_slug: Web/CSS/Type_position +browser-compat: css.types.position --- {{CSSRef}} -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é {{cssxref("background-position")}}. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<position>`** (ou **`<bg-position>`**) définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. Ce type de donnée est notamment utilisé avec les propriétés [`background-position`](/fr/docs/Web/CSS/background-position) et [`offset-anchor`](/fr/docs/Web/CSS/offset-anchor). + +> **Note :** 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. ## 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). + + +On peut définir une position 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 {{cssxref("<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). +Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)). 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`. @@ -39,67 +42,60 @@ mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rappor ### 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> ] ] - ] +```css +[ + [ left | center | right ] || [ top | center | bottom ] +| + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? +| + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] +] +``` + +> **Note :** La propriété [`background-position`](/fr/docs/Web/CSS/background-position) accepte également une syntaxe avec trois valeurs. Celle-ci n'est pas autorisée pour les autres propriétés qui utilisent une valeur `<position>`. ## 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 ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne. +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 une unique fonction de temporisation ([`easing-function`](/fr/docs/Web/CSS/easing-function)), le point se déplacera donc sur une ligne. ## Exemples -### CSS +### Positions valides -```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; -} -``` +```css example-good +center +left +center top -### HTML +right 8.5% +bottom 12vmin right -6px -```html -<div class="exemple">Exemple</div> +10% 20% +8rem 14px ``` -### Résultat +### Positions invalides -{{EmbedLiveSample('Exemples', 120, 200)}} +```css example-bad +left right +bottom top +10px 15px 20px 15px +``` ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Values', '#position', '<position>')}} | {{Spec2('CSS3 Values')}} | Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de `<position>` qui doit être utilisée. | -| {{SpecName('CSS3 Backgrounds', '#position', '<position>')}} | {{Spec2('CSS3 Backgrounds')}} | `<position>` est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté. | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}} | {{Spec2('CSS2.1')}} | Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}. | -| {{SpecName('CSS1', '#background-position', '<position>')}} | {{Spec2('CSS1')}} | `<position>` est défini de façon anonyme comme valeur de {{cssxref("background-position")}}. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.types.position")}} +{{Compat}} ## Voir aussi - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units) -- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) -- {{cssxref("background-position")}} -- {{cssxref("radial-gradient","radial-gradient()")}} -- {{cssxref("conic-gradient","conic-gradient()")}} +- [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) +- [`background-position`](/fr/docs/Web/CSS/background-position) +- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) +- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) |