Svojstvo top
Svojstvo top određuje položaj
gornje ivice elementa u odnosu na vrh roditeljskog elementa.
Vrednosti za svojstvo mogu se
zapisati u opšteprihvaćenim jedinicama mere,
na primer, u pikselima, incima, tačkama, procentima.
Zadate vrednosti mogu biti i negativni brojevi,
u tom slučaju elementi će se preklapati jedan
preko drugog. Odbrojavanje koordinata određuje svojstvo position,
koje obično ima vrednost relative
(relativni položaj) ili absolute
(apsolutni položaj).
Sintaksa
selektor {
top: veličina ili auto;
}
Primer
Hajde da pri prelasku mišem preko podređenog elementa
postavimo njegov položaj gornje ivice
jednak 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
A sada neka pri prelasku mišem gornja ivica
podređenog elementa bude postavljena
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;
}
:
Vidite takođe
-
svojstvo
bottom,
koje postavlja položaj donje ivice elementa -
svojstvo
left,
koje postavlja položaj leve ivice elementa -
svojstvo
right,
koje postavlja položaj desne ivice elementa -
pseudoelement
::backdrop,
koji postavlja položaj iza prvog elementa -
svojstvo
caption-side,
koje postavlja položaj naslova tabele