თვისება left

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

სინტაქსი

სელექტორი {
	left: ზომა ან 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-left: 50px;
}
p:hover {
	left: 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-left: 50px;
}
p:hover {
	left: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

იხილეთ აგრეთვე

თვისება bottom,
რომელიც ადგენს ელემენტის ქვედა კიდის პოზიციას
თვისება top,
რომელიც ადგენს ელემენტის ზედა კიდის პოზიციას
თვისება right,
რომელიც ადგენს ელემენტის მარჯვენა კიდის პოზიციას
ფსევდოელემენტი ::backdrop,
რომელიც ადგენს პირველი ელემენტის შემდეგ მდებარეობას