თვისება 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,
რომელიც აზუსტებს ცხრილის სათაურის პოზიციას