Lastnost top
Lastnost top določa položaj
zgornjega roba elementa od vrha nadrejenega elementa.
Vrednosti za lastnost lahko
zapišemo s splošno sprejetimi merskimi enotami,
na primer v slikovnih pikah, palcih, točkah, odstotkih.
Določene vrednosti so lahko tudi negativna števila,
v tem primeru se bodo elementi prekrivali drug
na drugega. Štetje koordinat določa lastnost position,
ki običajno zavzame vrednost relative
(relativni položaj) ali absolute
(absolutni položaj).
Sintaksa
selektor {
top: velikost ali auto;
}
Primer
Ob preletu miške nad podrejenim elementom
mu nastavimo položaj zgornjega roba
enak 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;
}
:
Primer
Zdaj pa naj bo ob preletu miške zgornji rob
podrejenega elementa nameščen
na -50px:
<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;
}
:
Glejte tudi
-
lastnost
bottom,
ki določa položaj spodnjega roba elementa -
lastnost
left,
ki določa položaj levega roba elementa -
lastnost
right,
ki določa položaj desnega roba elementa -
psevdoelement
::backdrop,
ki določa položaj za prvim elementom -
lastnost
caption-side,
ki določa položaj naslova tabele