თვისება position

თვისება position ადგენს ელემენტების პოზიციონირების მეთოდს. ეს თვისება ყველაზე ხშირად გამოიყენება თვისებებთან ერთად top, right, bottom, left, რომლებიც ადგენენ ზედაპირებს ზემოდან, მარჯვნიდან, ქვემოდან, მარცხნიდან შესაბამისად.

სინტაქსი

სელექტორი {
	position: absolute | relative | fixed | static | sticky;
}

მნიშვნელობები position-ისთვის

მნიშვნელობა	აღწერა
`absolute`	აბსოლუტური პოზიციონირება. ელემენტი ამოღებულია დოკუმენტის ნორმალური ნაკადიდან და პოზიციონირდება უახლოესი პოზიციონირებული წინაპრის მიმართ (თუ არის) ან ბრაუზერის ფანჯარასთან მიმართებაში.
`relative`	ფარდობითი პოზიციონირება. ელემენტი გადაინაცვლებს თავის ნორმალური პოზიციასთან მიმართებაში დოკუმენტის ნაკადში, მაგრამ სივრცე, რომელსაც იგი იკავებდა, რჩება რეზერვირებული.
`fixed`	ფიქსირებული პოზიციონირება. ელემენტი ამოღებულია დოკუმენტის ნორმალური ნაკადიდან და პოზიციონირდება ბრაუზერის ფანჯარასთან მიმართებაში. რჩება ადგილზე გვერდის გადახვევისას.
`static`	სტატიკური პოზიციონირება. მნიშვნელობა ნიშნავს პოზიციონირების არარსებობას და ელემენტი იქცევა ჩვეულებრივად.
`sticky`	წებოვანი პოზიციონირება. ელემენტი იქცევა როგორც `relative`, სანამ არ მიაღწევს მითითებულ პოზიციას გადახვევისას, რის შემდეგაც ეწებება მითითებულ ადგილს (როგორც `fixed`).

ნაგულისხმევი მნიშვნელობა: static.

მაგალითი . აბსოლუტური პოზიციონირება

განვათავსოთ ელემენტი ეკრანის ზედა მარცხენა კუთხეში მცირე ზედაპირებით:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

მაგალითი . აბსოლუტური პოზიციონირება

ახლა კი განვათავსოთ ელემენტი ეკრანის ზედა მარჯვენა კუთხეში მცირე ზედაპირებით:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

მაგალითი . ფიქსირებული პოზიციონირება

ფიქსირებული პოზიციონირებისას ელემენტი დარჩება ადგილზე გვერდის გადახვევისას:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

მაგალითი . ფარდობითი პოზიციონირება

ფარდობითი პოზიციონირებისას ელემენტი გადაინაცვლებს თავის ნორმალურ პოზიციასთან მიმართებაში, მაგრამ სხვა ელემენტები იქცევიან ისე, როგორც ელემენტი არ გადაინაცვლებდა:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

მაგალითი . ბუდობა

თუ მშობელს თვისება position აქვს მნიშვნელობა relative, მაშინ აბსოლუტურად დაპოზიცირებული ელემენტები დაპოზიცირდებიან მშობელთან მიმართებაში:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

მაგალითი . ბუდობა

თუ მშობელს თვისება position აქვს მნიშვნელობა absolute, მაშინ აბსოლუტურად დაპოზიცირებული ელემენტები დაპოზიცირდებიან მშობელთან მიმართებაში:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

მაგალითი . წებოვანი პოზიციონირება

თუ ელემენტისთვის თვისება position აქვს მნიშვნელობა sticky, მაშინ ელემენტი იქცევა როგორც relative, სანამ არ მიაღწევს მითითებულ პოზიციას გადახვევისას, რის შემდეგაც ეწებება ადგილს. მოდით გავაკეთოთ წებოვანი ჰედერი:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

მაგალითი . პოზიციის გარეშე

თუ ელემენტს მივანიჭებთ აბსოლუტურ პოზიციონირებას პოზიციის მითითების გარეშე, მაშინ ელემენტი დარჩება იმ ადგილზე, სადაც ის იდგა პოზიციონირების გარეშე, მაგრამ სხვა ელემენტები შეწყვეტენ მის შემჩნევას:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

მაგალითი . ერთი ღერძი

აბსოლუტური პოზიციონირებისას შესაძლებელია პოზიციის მითითება მხოლოდ ერთი ღერძის გასწვრივ. მაგალითად, თუ ჩვენ მივუთითებთ თვისებას top, მაშინ ვერტიკალურად ელემენტი ჩაიწევს საჭირო პოზიციაში, ხოლო ჰორიზონტალურად დარჩება იმ ადგილას, სადაც იდგა:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

მაგალითი . ყველა პოზიცია

აბსოლუტური პოზიციონირებისას შესაძლებელია პოზიციების მითითება ყველა მხრიდან, სიგანისა და სიმაღლის მითითების გარეშე. ამ შემთხვევაში ელემენტი განთავსდება მშობელი ბლოკის ცენტრში:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

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

თვისება z-index,
რომელიც ადგენს ელემენტების გადაფარვას