CSS bizga istalagan ob’yektni, brauzerning istalgan joyida chiqarish imkonini beradi. Buning uchun shu blok koordinatalrini ko‘rsatishimiz kerak holos. Blok deganda «div» tegidan tashqari ro‘yxatlar, paragraflar, zagolovkalar, rasmlar, umumiy qilib aytganda, blokli model ko‘rinishidagi barcha teglar tushuniladi. Koordinatalarni o‘rnatib, bloklarni joylashtirish pozitsiyalash (joylashinish) deyiladi. Maqola aynan bloklarni joylashuviga bag‘ishlanadi. Joylashtirish 2 xil ko‘rinshda bo‘ladi va bu xil ko‘rinishlar uchun quyidagi SSS xususiyatlarini ishlatamiz.

1. Absolyut joylashtirish(position:absolute;);

  1. Biror narsaga nisbatan joylashtirish(position:relative;).

Absolyut joylashtirish. Joylashtirishda, odatda ushbu tur joylashtirish ishlatiladi. CSSda joylashtiruv vazifasini «Position» kalit so‘zi amalga oshirib beradi, ushbu joylashtiruvni absolyut qilish uchun esa «absolute» qiymati beriladi. Undan so‘ng quyidagi kalit so‘zlar orqali koordinatalar beriladi:

top;

left;

right;

bottom.

Bu kalit so‘zlar, brauzerda qanday namoyon bo‘lishini quyidagi rasmda ko‘rish mumkin.

13css_1

Absolyut joylashtiruvning yaxshi tomoni shundaki, blok aynan siz bergan koordinatalarda joylashadi, o‘zi oldindan aniqlashtirib qo‘yilgan joy(html kodda berilgan joy) esa avtomat o‘chadi. Uning o‘rnida boshqa narsalar joylashishi mumkin. Misol ko‘ramiz, chunki so‘z bilan tushuntirish biroz qiyinroq. Dastlab, oddiy rasm qo‘yish misolini ko‘ramiz.

<html>
<head>
<title>Position</title>
</head>
<body>
<img src="bum.jpg"/>
<h1>Bumer I filmidagi aktyorlar va mashina!</h1>
</body>
</html>

13css_2

Endi shu misoldagi rasmni koordinata bo‘yicha joylashtiramiz.

<html>
<head>
<title>Position</title>
<style>
.smile{
border: 1px solid red;
position:absolute;
top:100px;
right:100px;
}
</style>
</head>
<body>
<img class="smile "src="bum.jpg"/>
<h1>Bumer I filmidagi aktyorlar va mashina!</h1>
</body>
</html>

13css_3

E’tibor bergan bo‘lsangiz, rasm o‘rnatilgan koordinataga ko‘chdi va rasm o‘rnida biz yozgan yozuv paydo bo‘ldi. Rasm koordinatasi, tepadan 100 piksel va o‘ng tomondan 100 piksel koordinatada joylashdi.

Odatda koordinata faqat ikkita qiymatda beriladi:

.mu{
position:absolute;
bottom:300px;
left:100px;
}

yoki

.mu{
position:absolute;
top:100px;
right:100px;
}

Blok brauzerning biror burchagiga nisbatan olinadi, shu sababli ikkita koordinata qiymati beriladi.

Agar, blok brauzerga yopishib turishini hohlasangiz, ya’ni brauzer kattaligi o‘zgarganda aylantirgich(prokrutka) chiqsa ham, blok aylanmasdan qotib turish kerak bo‘lsa, «absolute» qiymat o‘rniga «fixed» qiymat berish lozim.

.mu{
position:fixed;
top:100px;
right:100px;
}

Bu ikki qiymatni misollar orqali, ishlatib ko‘rin.

2. Biror narsaga nisbatan joylashtirish. Bu tur joylashtirishda, blokning dastlabki holatidan boshlab, koordinata hisoblanadi(absolyut joylashtirish kabi brauzerning yuqori qismidan emas). Undan tashqari blokning dastlabki holati o‘zgarishsiz saqlab qolinadi, odatda bo‘sh joy bo‘lib ko‘rinib turadi. Bu joylashtirishni amalga oshirish uchun, «position» xususiyatiga «relative» qiymati beriladi. YUqoridagi misolni «relative» orqali yozamiz.

<html>
<head>
<title>Position</title>
<style>
.smile{
border: 1px solid red;
position:relative;
top:100px;
right:10px;
}
</style>
</head>
<body>
<img class="smile "src="bum.jpg"/>
<h1>Bumer I filmidagi aktyorlar!</h1>
</body>
</html>

13css_4

Misoldan ko‘rinib turibdiki, rasm tegi birinchi yozilgan, demak rasm brauzerning chap yuqori qismida joylashishi kerak, uning tegida esa yozuv. Biz koordinatani berganimizdan so‘ng, rasm boshlang‘ich holatidan berilgan qiymat bo‘yicha surildi va dastlabki holati bo‘sh bo‘lib qoldi. Yozuv ham uning joyiga o‘tmadi, absolyut joylashtirish bo‘lganida, yozuv rasmning oldingi holatiga o‘tar edi.