DARSLAR + 16 DARAJA

CSS Position ni o'yin bilan o'rganing

Har darajada kichkina qutini maqsadga surishingiz kerak. Buni position, top/left va boshqa xossalarni yozib qilasiz. Yozganingiz darrov jonli ko'rinadi.

Jonli kod muharriri static, relative, absolute, sticky, fixed Har qadamda tushuntirish

Har bir position turini jonli animatsiya orqali ko'ring. Tushunib olgach, yuqoridagi «Amaliyot» ga o'ting va o'zingiz kod yozib mashq qiling.

position: static top: 30px, ta'sir yo'q

position: static

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 */

top / left

position: relative

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 */

top: 34px ↓ left: 38px →

top · right · bottom · left

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;

absolute

position: absolute

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 */

relative

joylashuv konteksti

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; }

fixed tugma

position: fixed

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;

Bo'lim A

Bo'lim B

Bo'lim C

position: sticky

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;

1 2 3

z-index

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.

Sahna position

Ajoyib!

Quti maqsadga tushdi.

Quti (sizniki) Maqsad Boshlang'ich

Vazifa

.box CSSJonli

Tushuntirish

Yordam kerakmi?