Sifa top

Sifa top inaweka msimamo wa ukingo wa juu wa kipengele kutoka juu ya kipengele cha mzazi. Thamani za sifa zinaweza kuandikwa kwa vitengo vya kawaida vya ukubwa, kwa mfano, kwenye saizi, inchi, pointi, asilimia. Thamani zilizowekwa zinaweza kuwa namba hasi, katika kesi hii vipengele vitakaa juu ya kila mmoja. Hesabu ya kuratibu imedhamiriwa na sifa position, ambayo kwa kawaida huchukua thamani relative (msimamo wa jamaa) au absolute (msimamo kamili).

Syntax

kichaguli {
	top: ukubwa au auto;
}

Mfano

Wacha tukielekeza kwenye kipengele cha mtoto tuweke msimamo wake wa mpaka wa juu sawa na 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;
}

Mfano

Sasa wacha mpaka wa juu wa kipengele cha mtoto uweko kwenye -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;
}

Angalia pia

sifa bottom,
ambayo inaweka msimamo wa ukingo wa chini wa kipengele
sifa left,
ambayo inaweka msimamo wa ukingo wa kushoto wa kipengele
sifa right,
ambayo inaweka msimamo wa ukingo wa kulia wa kipengele
pseudoelement ::backdrop,
ambayo inaweka msimamo baada ya kipengele cha kwanza
sifa caption-side,
ambayo inaweka msimamo wa kichwa cha jedwali