Propriété right
La propriété right définit la position
du bord droit d'un élément. Les valeurs de la propriété peuvent être
écrites avec des unités de mesure courantes,
par exemple, en pixels, pouces, points, pourcentages.
Les valeurs définies peuvent également être des nombres négatifs,
dans ce cas, les éléments se superposeront les uns
sur les autres. Le calcul des coordonnées est déterminé par la propriété position,
qui prend généralement la valeur relative
(position relative) ou absolute
(position absolue).
Syntaxe
sélecteur {
right: taille ou auto;
}
Exemple
Lors du survol d'un élément enfant,
définissons la position de son bord droit
à 25px :
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
right: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Exemple
Maintenant, lors du survol, que le bord droit
de l'élément enfant soit positionné
à -50px :
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
right: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Voir aussi
-
la propriété
bottom,
qui définit la position du bord inférieur de l'élément -
la propriété
top,
qui définit la position du bord supérieur de l'élément -
la propriété
left,
qui définit la position du bord gauche de l'élément -
le pseudo-élément
::backdrop,
qui définit le positionnement après le premier élément