CSS-də elementlərin mütləq pozisionlanması

Bu dərsdə biz elementlərin mütləq pozisionlanmasını nəzərdən keçirəcəyik. Bu, elementləri səhifənin göstərilən koordinatları üzrə yerləşdirməyə imkan verir. Məsələn, bir elementi səhifənin yuxarısından 100px və soldan 200px məsafədə yerləşdirmək olar. Element oraya köçəcək, orada başqa elementlərin olub-olmamasına baxmayaraq və sadəcə onların üzərinə düşəcək. Deyilir ki, bu zaman element sənədin normal axınından çıxır: qalan bütün elementlər elə davranacaqlar ki, sanki bizim elementimiz yoxdur.

Bir elementi mütləq pozisionlaşdırmaq üçün bu elementə position xassəsini absolute dəyərində təyin etmək lazımdır. Bu xassədən əlavə, daha ikisi lazımdır: biri şaquli koordinatı, digəri isə üfüqi koordinatı təyin edəcək.

Şaquli üçün ya yuxarıdan, ya da aşağıdan boşluq təyin edilməlidir. Yuxarıdan boşluq top xassəsi ilə, aşağıdan boşluq isə bottom xassəsi ilə təyin edilir. Üfüqi üçün ya soldan, ya da sağdan boşluq təyin edilməlidir. Soldan boşluq left xassəsi ilə, sağdan boşluq isə right xassəsi ilə təyin edilir.

Gəlin nümunələrə baxaq.

Nümunə

Əvvəlcə gəlin sadəcə iki blok yaradaq pozisionlanma olmadan (diqqət edin ki, elementlər pəncərənin kənarına sıxılmayıb, çünki body-nin standart olaraq margin-i var):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Nümunə

İndi gəlin yaşıl bloka mütləq pozisionlanma təyin edək, onu yuxarıdan 150px və soldan 100px mövqeyində yerləşdirək:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Nümunə

İndi gəlin yaşıl bloku yuxarıdan 0px və soldan 0px mövqeyində yerləşdirək:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Nümunə

İndi gəlin yaşıl bloku yuxarıdan 0px və sağdan 0px mövqeyində yerləşdirək:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Nümunə

İndi gəlin yaşıl bloku aşağıdan 0px və sağdan 0px mövqeyində yerləşdirək:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Nümunə

İndi gəlin yaşıl bloku aşağıdan 0px və soldan 0px mövqeyində yerləşdirək:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktiki tapşırıqlar

Mütləq pozisionlanmadan istifadə edərək blokları aşağıdakı kimi yerləşdirin: