Attribut RIGHT
Rôle
L’attribut right permet de positionner, à partir de la droite, un élément qui échappe au flux HTML (disposition par défaut des éléments). Il peut être conjointement utilisé avec 3 autres attributs : left (à partir de la droite), bottom (à partir du bas), top (à partir du haut).
Si la valeur de l’attribut position est « absolute », la droite correspond au bord à droite du premier élément parent qui est aussi en position, ou le cas échéant, du bord à droite de la fenêtre du navigateur.
Si la valeur de l’attribut position est « fixed », la droite correspond au bord à droite de la fenêtre du navigateur.
Si la valeur de l’attribut position est « relative », la droite correspond au bord à droite de l’élément lui-même.
Version : CSS2
Héritage (inherit) : non
Propriété Javascript : element.style.right
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
#ct{
width: 300px;
height: 200px;
border: thin solid red ;
position : relative;
}
#droite{
background-color: orange;
border: thin solid blue ;
position: absolute;
width: 100px;
margin: 10px;
bottom: 0;
right: 0;
}
– Le code HTML
<div id="ct"> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p> <div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div>
Résultat
Le référentiel right du bloc en position « absolute » (bordure bleu) est le bord à droite du bloc en position relative (bordure rouge)
Compatibilité
L’attribut right est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut right sont:
- auto
- Le navigateur calcule la position .
Syntaxe :
right : auto - length
- Définit une valeur en px, pt, cm, em.
Syntaxe :
right : 20px - pourcentage
- Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
right : 30% - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
right : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
right : inherit
A voir aussi
display– clear– z-index– flex– align-content– align-items– align-self– columns– vertical-align
