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 қасиеті,
ол кестенің тақырып жазуының орнын белгілейді