CSS Position ni o'yin bilan o'rganing
Kichkina qutini position, top va left xossalarini yozib maqsadga surasiz. Yozganingiz darrov jonli ko'rinadi.
Vazifa: Qutini past-o'ng burchakka qo'ying
Har bir position turini jonli animatsiya orqali ko'ring. Tushunib olgach, yuqoridagi «Amaliyot» ga o'ting va o'zingiz kod yozib mashq qiling.
Standart holat
Har bir element boshida static bo'ladi va odatiy oqimda turadi. Bu holatda top, left, right, bottom umuman ishlamaydi. Ularni ishlatish uchun avval boshqa position berish kerak.
/* qimirlamaydi */ position: static; top: 30px; /* e'tiborsiz */
O'z joyidan siljiydi
relative element o'zining odatiy joyidan siljiydi, lekin joyini band qilib qoladi, yonidagi elementlar surilmaydi (kulrang quti qimirlamadi).
position: relative; top: 30px; /* pastga */ left: 40px; /* o'ngga */
To'rt yo'nalish
Bu xossalar elementni chetlaridan suradi: top yuqoridan (pastga), left chapdan (o'ngga), right va bottom esa qarama-qarshi chetdan. Manfiy qiymat teskari yo'nalishga suradi.
top: 20px; right: 20px; bottom: 20px; left: 20px;
Oqimdan chiqadi
absolute elementni oqimdan butunlay chiqaradi (yonidagilar bo'sh joyni to'ldiradi) va uni eng yaqin joylashtirilgan ota-elementga nisbatan qo'yadi. Chetlardan aniq joyga mixlash uchun ishlatiladi.
position: absolute; top: 0; right: 0; /* yuqori-o'ng */
Kimga nisbatan?
absolute element eng yaqin ota-elementga bog'lanadi (position u static bo'lmagan). Ota-elementga relative bersangiz, u «kontekst» bo'ladi va bola shu quti ichida joylashadi.
.ota { position: relative; } .bola { position: absolute; top: 0; right: 0; }
Ekranga mixlanadi
fixed elementni ekran oynasiga mixlaydi. Sahifa qanchalik aylansa ham, u bir joyda qotib turadi. Doim ko'rinadigan chat tugmasi, «yuqoriga» tugmasi shunday qilinadi.
position: fixed; bottom: 16px; right: 16px;
Aylantirilganda yopishadi
sticky, relative va fixed aralashmasi. Element aylantirilguncha odatdagidek turadi, belgilangan joyga yetganda yopishib qoladi. Bo'lim sarlavhalari va menyular shunday qilinadi.
position: sticky; top: 0;
Ustma-ust tartibi
Elementlar bir-birining ustiga tushganda z-index tartibni belgilaydi: qiymati kattaroq element oldinda ko'rinadi. Muhim: u faqat joylashtirilgan (static bo'lmagan) elementda ishlaydi.
position: relative; z-index: 10; /* oldinga */
Tayyormisiz?
Endi bilimni sinab ko'ring: 16 darajali amaliyotda o'zingiz kod yozib qutini maqsadga surasiz.
Ajoyib!
Quti maqsadga tushdi.