Eigenschap right
De eigenschap right bepaalt de positie van de
rechterrand van een element. Waarden voor de eigenschap kunnen
worden opgegeven met algemeen aanvaarde maateenheden,
bijvoorbeeld in pixels, inches, punten, percentages.
De opgegeven waarden kunnen ook negatieve getallen zijn,
in dat geval zullen elementen over elkaar heen worden geplaatst.
De coördinatentelling wordt bepaald door de eigenschap position,
die meestal de waarde relative
(relatieve positie) of absolute
(absolute positie) aanneemt.
Syntaxis
selector {
right: grootte of auto;
}
Voorbeeld
Laten we bij het hoveren over een kindelement
de positie van de rechterrand instellen
op 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;
}
:
Voorbeeld
En laat nu bij het hoveren de rechterrand
van het kindelement worden geplaatst
op -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;
}
:
Zie ook
-
eigenschap
bottom,
die de positie van de onderrand van een element bepaalt -
eigenschap
top,
die de positie van de bovenrand van een element bepaalt -
eigenschap
left,
die de positie van de linkerrand van een element bepaalt -
pseudoelement
::backdrop,
die de positionering na het eerste element bepaalt
