Position xossasi(O'rin)
position - xususiyati element uchun ishlatiladigan joylashish turini bildiradi (statik, nisbiy, aniq, mutlaq yoki yopishqoq).
Bu yerda 4 xil pozitsiya qiymatlari mavjud:
- static
- relative
- fixed
- absolute
- sticky
Keyinchalik elementlar yuqori, pastki, chap va o'ng xususiyatlar yordamida joylashtiriladi. Biroq, bu xususiyatlar pozitsiya xususiyati birinchi o'rnatilmagan bo'lsa, ishlamaydi. Ular pozitsiya qiymatiga qarab turli xil ishlaydi.
position: static;
HTML elementlari standart bo'yicha statik joylashgan. Statik joylashtirilgan elementlarga yuqori, pastki, chap va o'ng xususiyatlar ta'sir qilmaydi. Element: static; hech qanday maxsus yo'l bilan joylashtirilmagan; u har doim sahifaning odatiy hajmiga muvofiq joylashadi:
Bu yerda CSS fayli:
position: relative;
Element: relative; uning odatiy pozitsiyasiga nisbiy joylashgan.
Nisbiy pozitsiyasga ega elementning yuqori, o'ng, pastki va chap xususiyatlarini qo'shish uni normal pozitsiyasidan uzoqlashtiradi.
Namuna:
position: fixed;
Element: fixed; ekranga nisbiy joylashgan, ya'ni sahifani aylantirsangiz ham doimo o'sha joylashtirilgan joyida qoladi. Elementni joylashtirish uchun yuqori, o'ng, pastki va chap xususiyatlari ishlatiladi. Qoziqlangan(😁) element, odatda joylashtirilgan sahifada bo'sh joy qoldirmaydi(relative ga qarang). CSS faylimiz:
position: absolute;
Element: absolute; o'zidan avvalgi(ajdodi) yaqin joylashgan elementga nisbiy joylashgan. Ammo, o'zidan avval hech qanday element(ajdodi) bo'lmasa,u hujjatning tana qismiga nisbiy va sahifa bilan birga ko'chuvchan bo'ladi.
position: sticky;
Element: sticky; foydalanuvchi scroll pozitsiyasiga asoslangan tarzda joylashadi.
Elementlarni ustga chiqarish
z-index xususiyati orqali element tartibini belgilashimiz mumkin. Element boshqa birining ustida yoki orqasida bo'lishini ifodalashimiz mumkin.
Kod:
