Хосияти top

Хосияти top ҷойгиршавии канори болоии элементро аз болои унсури волидайн муайян мекунад. Қиматҳо барои хосият метавонанд бо воҳидҳои умумии андоза сабт карда шаванд, масалан, дар пиксел, дюйм, пункт, фоиз. Қиматҳои муқарраркардашуда метавонанд рақамҳои манфӣ ҳам бошанд, дар ин ҳолат унсурҳо бар рӯи якдигар ҷойгир карда мешаванд. Ҳисоби координатҳо аз рӯи хосияти position муайян карда мешавад, ки одатан қимати relative (ҷойгиршавии нисбӣ) ё absolute (ҷойгиршавии мутлақ) -ро қабул мекунад.

Синтаксис

интихобкунанда {
	top: андоза ё auto;
}

Намуна

Биёед ҳангоми нишон додан ба унсури фарзанд барои он ҷойгиршавии канори болоиро баробар ба 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;
}

Намуна

Акнун биёед ҳангоми нишон додан канори болои унсури фарзанд дар -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;
}

Нигаред низ

хосияти bottom,
ки ҷойгиршавии канори поёнии элементро муайян мекунад
хосияти left,
ки ҷойгиршавии канори чапи элементро муайян мекунад
хосияти right,
ки ҷойгиршавии канори рости элементро муайян мекунад
судуэлементи ::backdrop,
ки ҷойгиршавии баъд аз унсури аввалро муайян мекунад
хосияти caption-side,
ки ҷойгиршавии сарлавҳаи ҷадвалро муайян мекунад