Xüsusiyyət position

Xüsusiyyət position elementlərin pozisionlanma üsulunu təyin edir. Bu xüsusiyyət ən çox top, right, bottom, left xüsusiyyətləri ilə birlikdə istifadə olunur, ki onlar da yuxarıdan, sağdan, aşağıdan və soldan aralıqları müvafiq olaraq təyin edirlər.

Sintaksis

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Position üçün dəyərlər

Dəyər	Təsvir
`absolute`	Absolyut pozisionlama. Element sənədin normal axınından çıxarılır və ən yaxın pozisionlanmış ata elementinə (əgər varsa) və ya brauzər pəncərəsinə nisbətən yerləşdirilir.
`relative`	Nisbi pozisionlama. Element sənəd axınındakı normal mövqeyinə nisbətən yerdəyişir, lakin onun tutduğu yer rezerv olaraq qalır.
`fixed`	Fiksə edilmiş pozisionlama. Element sənədin normal axınından çıxarılır və brauzər pəncərəsinə nisbətən yerləşdirilir. Səhifənin sürüşdürülməsi zamanı yerində qalır.
`static`	Statik pozisionlama. Dəyər pozisionlamanın olmaması deməkdir və element normal davranır.
`sticky`	Yapışan pozisionlama. Element sürüşdürmə zamanı müəyyən edilmiş mövqeyə çatana qədər `relative` kimi davranır, bundan sonra isə göstərilən yerə yapışır (`fixed` kimi).

Susmaya görə dəyər: static.

Nümunə . Absolyut pozisionlama

Elementi kiçik aralıqlarla ekranın yuxarı sol küncündə yerləşdirək:

<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;
}

Nümunə . Absolyut pozisionlama

İndi isə elementi kiçik aralıqlarla ekranın yuxarı sağ küncündə yerləşdirək:

<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;
}

Nümunə . Fiksə edilmiş pozisionlama

Fiksə edilmiş pozisionlama zamanı element sürüşdürmə zamanı yerində qalacaq:

<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;
}

Nümunə . Nisbi pozisionlama

Nisbi pozisionlama zamanı element öz normal mövqeyinə nisbətən yerdəyişir, lakin digər elementlər elə davranırlar, sanki element yerdəyişməyib:

<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;
}

Nümunə . İç-içəlik

Əgər ata elementin position xüsusiyyətinin dəyəri relative olarsa, onda absolyut pozisionlanmış elementlər ata elementə nisbətən yerləşəcəklər:

<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;
}

Nümunə . İç-içəlik

Əgər ata elementin position xüsusiyyətinin dəyəri absolute olarsa, onda absolyut pozisionlanmış elementlər ata elementə nisbətən yerləşəcəklər:

<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;
}

Nümunə . Yapışan pozisionlama

Əgər element üçün position xüsusiyyətinin dəyəri sticky olarsa, onda element sürüşdürmə zamanı müəyyən edilmiş mövqeyə çatana qədər relative kimi davranır, bundan sonra isə yerə yapışır. Gəlin yapışan başlıq edək:

<h1>Əsas Sayt Başlığı</h1>

<div class="header">başlıq başlıq başlıq</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;
}

Nümunə . Pozisiyasız

Əgər elementə pozisiyası göstərilmədən absolyut pozisionlama verilsə, onda element pozisionlanma olmadan dayandığı yerdə qalacaq, lakin digər elementlər onu his etməyi dayandıracaq:

<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;
}

Nümunə . Bir ox

Absolyut pozisionlama zamanı yalnız bir ox üzrə pozisiya təyin etmək olar. Məsələn, əgər biz top xüsusiyyətini təyin etsək, onda şaquli istiqamətdə element tələb olunan pozisiyada duracaq, üfüqi istiqamətdə isə dayandığı yerdə qalacaq:

<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;
}

Nümunə . Bütün pozisiyalar

Absolyut pozisionlama zamanı eni və hündürlüyü təyin etmədən bütün tərəflərdən pozisiyalar təyin etmək olar. Bu zaman element ata blokun mərkəzində duracaq:

<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;
}

Həmçinin bax

z-index xüsusiyyəti,
ki elementlərin üst-üstə düşməsini təyin edir