Savybė top
Savybė top nustato
viršutinio elemento krašto padėtį nuo tėvinio elemento viršaus.
Vertes šiai savybei galima
nurodyti visuotinai priimtais matavimo vienetais,
pavyzdžiui, pikseliais, coliais, punktais, procentais.
Nurodytos vertės gali būti ir neigiami skaičiai,
tokiu atveju elementai bus dedami vienas ant kito.
Koordinačių atskaitos tašką nustato savybė position,
kuri paprastai įgauna reikšmę relative
(santykinė padėtis) arba absolute
(absoliuti padėtis).
Sintaksė
selektorius {
top: dydis arba auto;
}
Pavyzdys
Kai užvedame žymeklį ant dukterinio elemento,
nustatykime jo viršutinės krašto padėtį
lygią 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;
}
:
Pavyzdys
Dabar, kai užvedame žymeklį, viršutinis dukterinio elemento kraštas
tebūnie išdėstytas
-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;
}
:
Taip pat žiūrėkite
-
savybė
bottom,
kuri nustato apatinio elemento krašto padėtį -
savybė
left,
kuri nustato kairiojo elemento krašto padėtį -
savybė
right,
kuri nustato dešiniojo elemento krašto padėtį -
pseudoelementas
::backdrop,
kuris nustato išdėstymą po pirmuoju elementu -
savybė
caption-side,
kuri nustato lentelės antraštės padėtį