Right-ominaisuus
Ominaisuus right asettaa
elementin oikean reunan sijainnin. Ominaisuuden arvot voidaan
kirjoittaa yleisesti hyväksytyillä kokoyksiköillä,
esimerkiksi pikseleinä, tuumina, pisteinä, prosentteina.
Asetettavat arvot voivat olla myös negatiivisia lukuja,
tässä tapauksessa elementit asettuvat päällekkäin.
Koordinaattien laskenta määräytyy ominaisuuden position perusteella,
joka yleensä saa arvon relative
(suhteellinen sijainti) tai absolute
(absoluuttinen sijainti).
Syntaksi
valitsija {
right: koko tai auto;
}
Esimerkki
Asetetaan lapsielementille
sen oikean reunan sijainti
arvoksi 25px kun kursorilla viitataan siihen:
<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;
}
:
Esimerkki
Asetetaan nyt lapsielementin oikea reuna
sijaintiin
-50px kun kursorilla viitataan siihen:
<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;
}
:
Katso myös
-
ominaisuus
bottom,
joka asettaa elementin alareunan sijainnin -
ominaisuus
top,
joka asettaa elementin yläreunan sijainnin -
ominaisuus
left,
joka asettaa elementin vasemman reunan sijainnin -
pseudoelementti
::backdrop,
joka asettaa sijainnin ensimmäisen elementin jälkeen