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į