Top-ominaisuus
Ominaisuus top asettaa
elementin yläreunan sijainnin vanhempielementin yläosasta.
Ominaisuuden arvot voidaan
kirjoittaa yleisesti hyväksytyillä kooko yksikö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 {
top: koko tai auto;
}
Esimerkki
Asetetaan lapsielementille, kun sitä osoitetaan,
sen yläreunan sijainniksi
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-top: 50px;
margin-left: 50px;
}
p:hover {
top: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Esimerkki
Asetetaan nyt lapsielementin yläreuna
kohdalleen -50px, kun sitä osoitetaan:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
margin-top: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
top: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Katso myös
-
ominaisuus
bottom,
joka asettaa elementin alareunan sijainnin -
ominaisuus
left,
joka asettaa elementin vasemman reunan sijainnin -
ominaisuus
right,
joka asettaa elementin oikean reunan sijainnin -
pseudoelementti
::backdrop,
joka asettaa sijainnin ensimmäisen elementin jälkeen -
ominaisuus
caption-side,
joka asettaa taulukon otsikon sijainnin