right

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer le bord droit par rapport à un positionnement absolue.

Remarques

• Positionnement relatif et absolu : La propriété right est utilisée principalement dans les contextes de positionnement absolu ou relatif. Lorsqu'un élément a un position: absolute; ou position: relative;, la propriété right permet de définir la distance entre le côté droit de l'élément et le côté droit de son conteneur de référence. Par exemple, right: 10px; déplace l'élément de 10 pixels vers la gauche par rapport au bord droit de son conteneur.
• Comportement avec position: relative : Lorsqu'une propriété right est utilisée avec position: relative;, l'élément est déplacé par rapport à sa position initiale. Si l'élément est déjà placé à un endroit spécifique dans le flux normal du document, l'utilisation de right déplace cet élément vers la gauche du conteneur sans modifier l'espace qu'il occupe dans le flux, contrairement à position: absolute où l'élément sort du flux.
• Combinaison avec left : La propriété right peut être utilisée en combinaison avec left pour contrôler le positionnement horizontal d'un élément. Lorsque left et right sont définis, ils spécifient des contraintes pouvant être utilisées pour centrer un élément ou lui donner une largeur spécifique. Par exemple, left: 10px; right: 10px; fait en sorte que l'élément occupe toute la largeur de son conteneur, moins 20 pixels (10px de chaque côté).
• Unités compatibles : La propriété right accepte plusieurs unités de mesure, telles que les pixels (px), les pourcentages (%), les em, et les rem. L'unité la plus courante est le pixel, mais l'utilisation de pourcentage est utile pour rendre les éléments réactifs, car il se réfère à la largeur du conteneur parent. Par exemple, right: 20%; déplace l'élément de 20 % de la largeur de son conteneur.
• Effets sur les éléments flottants : Lorsqu'un élément est flottant (float), la propriété right peut affecter son alignement par rapport à d'autres éléments. En revanche, les éléments en position: absolute; ou position: fixed; ne sont pas affectés par le flot normal du document, et la propriété right fonctionne indépendamment de l'autre contenu.
• Effets sur les éléments fixes : Lorsqu'un élément utilise position: fixed;, la propriété right définit la distance entre l'élément et le côté droit de la fenêtre de visualisation. Cela permet de fixer des éléments comme des barres de navigation ou des boutons dans une position spécifique par rapport à la fenêtre du navigateur, quel que soit le défilement de la page.
• Comportement avec auto : La valeur auto peut être utilisée avec la propriété right. Cela signifie que le navigateur calculera la valeur automatiquement, en fonction du contexte d'élément et du conteneur. Par exemple, si right: auto; est appliqué à un élément, le navigateur essaiera de placer l'élément en fonction des autres propriétés de positionnement, comme left ou margin.
• Prise en charge du modèle de boîte : Il est important de noter que la propriété right prend en compte la boîte de l'élément, y compris les marges, les bordures et le padding. Cependant, contrairement à left, pouvant parfois avoir un comportement plus intuitif pour le calcul des positions, right peut être sujet à des résultats inattendus, en particulier si les dimensions de l'élément sont définies en pourcentage ou si le modèle de boîte (box-sizing) n'est pas correctement configuré.