თვისება bottom

თვისება bottom ადგენს ელემენტის ქვედა კიდის მდებარეობას. თვისების მნიშვნელობები შეიძლება ჩაიწეროს ზომების ზოგადად მიღებული ერთეულებით, მაგალითად, პიქსელებში, ინჩებში, პუნქტებში, პროცენტებში. მინიჭებული მნიშვნელობები შეიძლება იყოს უარყოფითი რიცხვებიც, ამ შემთხვევაში ელემენტები ერთმანეთს დაიფარავენ. კოორდინატების ჩათვლა განისაზღვრება თვისებით position, რომელიც ჩვეულებრივ იღებს მნიშვნელობას relative (ფარდობითი პოზიცია) ან absolute (აბსოლუტური პოზიცია).

სინტაქსი

სელექტორი {
	bottom: რიცხვი გაზომვის ერთეულთან ერთად ან 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;
}
p:hover {
	bottom: 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;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ასევე იხილეთ

თვისება top,
რომელიც ადგენს ელემენტის ზედა კიდის პოზიციას
თვისება left,
რომელიც ადგენს ელემენტის მარცხენა კიდის პოზიციას
თვისება right,
რომელიც ადგენს ელემენტის მარჯვენა კიდის პოზიციას
ფსევდოელემენტი ::backdrop,
რომელიც ადგენს მდებარეობას პირველი ელემენტის შემდეგ
თვისება caption-side,
რომელიც ადგენს ცხრილის სათაურის პოზიციას