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 касиети,
таблицанын аталышынын ордун белгилейт