1. Position — nima?

Default holda elementlar HTMLda yozilgan tartibda joylashadi. position xossasi bu qoidani o'zgartirib, elementni boshqa joyga qo'yish imkonini beradi.

• static — default (odatiy oqim, siljitib bo'lmaydi).
• relative — o'z joyidan siljitish mumkin.
• absolute — oqimdan chiqib, ota-elementga nisbatan joylashadi.
• fixed — ekranga nisbatan qotirib qo'yiladi.
• sticky — relative va fixed aralashmasi.

Siljitish uchun 4 ta yo'nalish ishlatiladi: top, right, bottom, left.

2. relative

Element O'Z JOYIDAN qancha siljishini belgilaydi. Atrofdagi elementlar uning joyini eslab qoladi.

1.quti {
2  position: relative;
3  top: 20px;
4  left: 30px;
5}

3. absolute

Element oddiy oqimdan CHIQADI va yaqin ota-element (position: relative, absolute yoki fixed bo'lgan) ga nisbatan joylashadi. Agar bunday ota yo'q bo'lsa — butun sahifaga nisbatan.

4. fixed

Element brauzer oynasiga QOTIRIB qo'yiladi. Sahifa aylansa ham, u bir joyda turadi. Masalan: yuqoridagi navigatsiya, pastdagi chat tugmasi, cookie bildirishnomasi.

1.nav {
2  position: fixed;
3  top: 0;
4  left: 0;
5  right: 0;
6  background: white;
7  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
8}
9
10.chat-btn {
11  position: fixed;
12  bottom: 20px;
13  right: 20px;
14}

5. sticky

Element o'z joyida turadi, lekin foydalanuvchi shu joydan o'tib aylantirsa — fixed kabi yopishib qoladi. Bu hozirgi zamonaviy saytlarda navigatsiya uchun eng ko'p ishlatiladi.

1header {
2  position: sticky;
3  top: 0;
4  background: white;
5}

6. z-index — qatlam raqami

Ekranning 2 o'lchovi bor: X (chap-o'ng) va Y (yuqori-past). z-index — 3-o'lchov, chuqurlik. Raqam qancha katta bo'lsa, element shuncha OLDINDA (tepada) turadi.

1.orqa {
2  position: absolute;
3  z-index: 1;
4}
5
6.oldin {
7  position: absolute;
8  z-index: 10;
9}
10
11.modal {
12  position: fixed;
13  z-index: 9999;  /* hammadan oldinda */
14}