CSSda position turlari va uning barcha qiymatlari

Position nima? position - ingliz tilida joylashuv degan ma'noni anglatadi shuningdek hozirgi kunda uning olimlar tomonidan atiga 5ta qiymati aniqlangan. Agarda
tinib-tinchimas olimlarimiz tomonidan positionga yangi 6-7-qiymatlar ham qo'shilsa ajab emas. Uning vazifasi element joylashuvini hal qilish ya'ni bizda bir element bor uning joylashuvini biz Float(dinozavr davrida foydalanilgan, hozirda deyarli foydalanilinmaydi) bilan ham, Flexbox(display: flex) bilan ham, Grid(display: grid) bilan ham hal qila olmasak(eplay olmasak) bizga yordamga position keladi. Yuqorida aytib o'tganimdek uning 5ta qiymati bor holatga qarab ishlataveramiz.

Bilmaganlar position nima ekanligini tushunib olgan bo'lsa, bilganlar esa eslab olgan bo'lsa biz boshladik.

Bismillah

Position qiymatlari

1. static
2. relative
3. absolute
4. fixed
5. sticky

static

HTMLdagi har bir elementimizning tabiiy ya'ni biz unga position qiymatlarini bermaganimizdagi qiymati bo'ladi. Ushbu qiymat static qiymati hisoblanadi bu qiymat brauzer tomonidan tabiiy holatda berilgan. Bundan ham soddaroq qilib aytadigan bo'lsam, biz kod yozishni boshladik hech qanday elementga position qiymatini bermadik, demak har bir elementning position qiymati avtomatik ravishda static hisoblanadi. Bu shunchaki qiymat, ushbu qiymatda positionga aloqador hech nima ishlamaydi. Buni yaxshilab eslab qoling !

absolute, fixed va sticky

Sarlavhani o'qib relativeni ko'rmasdan darrov absolute, fixed va stickyga sakrab o'tib ketdik deb o'ylamang. Muhim bo'lgani uchun shundan boshlashni afzal bildim.

Ushbu 3 qiymatda elementning display qiymati (display: inline-block)ga o'zgarib ketadi. Qiziq nega unday deb so'rasangiz "Bilmadim o'zi shunaqa, o'zini guli" - degan javobni olasiz. display turining inline, inline-block, block qiymatlari orasidagi farqni bilasiz degan umiddaman, agar bilmasangiz ajab bo'libdi 😉

Endi dodingizni Stack Overflowga ayting, Stack Overflow bor bo'lsin.

Ana endi men o'zim tuzgan "4tasi 1da" deb nomlangan jadvalga bir nazar tashlasak.

Jadvalga yaxshilab qarasangiz ham sizga top, bottom, left, right turlari va z-index turi notanishmi? Juda ham soz aslini olganda men ham yaxshi bilmayman deb qolaymi, albatta hazil 😊 Elementni top - yuqoridan, bottom - pastdan, left - chapdan,
right - o'ngdan suradi. Ushbu turlar faqatgina position turining
non-static(staticdan boshqa hammasi) qiymatlarida ishlaydi, sababi esa static sarlavhasi ostidagi matnda keltirilgan: "Bu shunchaki qiymat, ushbu qiymatda positionga aloqador hech nima ishlamaydi. Buni yaxshilab eslab qoling !"

Ushbu turlar qiymat sifatida manfiy qiymatni ham qabul qila oladi ya'ni (top: 50px) desangiz topdan 50px tushadi, (top: -50px) desangiz topga 50px ko'tariladi.

z-indexga keladigan bo'lsak bu ham el qatori (position: static)ni tan olmaydi hamda -1, 1-999 qiymatlari bor. 1 eng ostki qavat undan ham ostkisi -1, 999 eng yuqori qavat. Elementlarni qaysi birining z-index qiymati yuqori bo'lsa o'sha element eng yuqorida turadi. Jumanazar to'ga kosmosdan olgan rasmga qarang.

fixed qiymati elementni veb sahifaga qotirib qo'yadi ya'ni biron saytda siz scroll qilganingizda ham qimirlamayotgan element bo'lsa bilingki uning position qiymati fixedga teng, agar ma'lum vaqt qimirlab keyin qotib qolgan bo'lsa u sticky bo'ladi faqat u haqida sal quyiroqda ba'tafsil gaplashamiz.

relative

relative qiymati elementga hech qanday ta'sir ko'rsatmaydi. Odatda position turining imkoniyatlaridan, masalan z-indexdan foydalanmoqchi bo'lsangiz element position qiymatiga relative beriladi. Aytganimdek relative qiymati "beg'ubordir" elementga ta'siri yo'q.

sticky

Tarixda absolute hamda fixed turmush qurishadi natijada (position: sticky) dunyoga keladi. Bilib turganingizdek sticky o'zida ham absolute, ham fixed qiymatlarini saqlaydi. Tasavvur qiling sizda 100 ga yaqin elementlar qatorasiga joylashgan. Siz oxirgi elementning position qiymatini sticky, top qiymatini 100px qilib berdingiz. Ushbu holatda elementning position qiymati uning top qiymati 100pxga yetgunicha
(position: absolute), top qiymati 100px bo'lgandan keyin (position: fixed)ga o'zgaradi.

"Veb sahifa skleti" nomli rasmga qarang, qora chiziq sahifaning yuqori qismi bo'ladigan bo'lsa, eng quyidagi elementga (top: 50px) qilib berganimizning hisobiga element topga 50px qolganda o'zining position qiymatini absolutedan fixedga o'zgartiradi. Menimcha yaxshi tushuntira oldim.

So'ngi so'z va foydali manbaalar

Agar maqolaning shu qismigacha yetib kelgan bo'lsangiz tashakkur, o'ylaymanki sizga qiymat bera oldim. Ushbu maqolani 4 marta qayta yozishga to'g'ri keldi, internet hamda saytning ayrim buglari tufayli. Siz o'qiyotgan maqola 4-si katta ehtimol bilan 😉

Quyida position mavzusini mustaqil o'rganish uchun o'zim bilgan eng yaxshi o'zbek tilidagi manbaalarni beraman.

👉 Ulug'bek Samigjanov - (21-24-videolar)

👉 Webbrain Academy

👉 Khan Academy Uzbek

👉 Ilmizla - (72-79-videolar)