CSS joylashuvi faqat X, Y koordinatlaridan ko'proq
CSS joylashuvi uzoq vaqtdan beri veb-sayt tartibini yaratishda muhim rol o'ynagan. Flexbox va CSS Grid kabi yangi CSS tuzish texnikasi paydo bo'lishiga qaramasdan, joylashishni aniqlash har qanday veb-dizaynerning xiyla paketida muhim o'rin tutadi.
CSS joylashishni aniqlashni ishlatishda, birinchi narsa qilish kerak bo'lgan narsa, ma'lum bir element uchun mutlaq yoki nisbiy joylashishni aniqlashni ishlatmoqchi bo'lsangiz brauzerga xabar berish uchun pozitsiya uchun CSS xususiyatini o'rnatish. Bundan tashqari, ushbu ikki joylashish xususiyatlarining orasidagi farqni aniq tushunib olishingiz kerak.
Mutlaq va nisbiy veb-dizaynda eng ko'p qo'llaniladigan ikki CSS-ning joylashuvi xususiyatiga ega bo'lsa-da, joylashuv xususiyati uchun aslida to'rtta davlat mavjud:
- statik
- mutlaq
- nisbiy
- qattiq
Statik - veb-sahifadagi har qanday element uchun sukut lavozim. Agar siz elementning o'rnini aniqlamasangiz, u statik bo'ladi. Bu esa, u HTML hujjatning qaerda joylashganligi va u hujjatning normal oqimida qanday namoyon bo'lishiga qarab ekranda ko'rsatilishini bildiradi.
Agar siz statik holatga ega bo'lgan elementga yuqorida yoki chapda joylashishni aniqlash qoidalarini qo'llasangiz, u qoidalar e'tiborga olinmaydi va element oddiy hujjat oqimida ko'rinadigan joyda qoladi. Aslida, siz CSS-da statik holatga elementni o'rnatishingiz kerak bo'lsa, unda kamdan-kam hollarda ushbu qiymat asl qiymati hisoblanadi.
Mutlaq CSS joylashuvi
Mutlaq joylashishni aniqlash, ehtimol, eng oson CSS manzilini tushunishdir. Ushbu CSS manzil xususiyatidan boshlaysiz:
Lavozim: mutlaq;Ushbu qiymat brauzerda nima bo'lishidan qat'iy nazar, hujjatning normal oqimidan olib tashlanishi va sahifadagi aniq bir joyga joylashtirilganligini bildiradi. Bu element elementning eng yaqin statik tarzda joylashtirilgan ajdodlari asosida hisoblanadi.
To'liq joylashtirilgan element hujjatning normal oqimidan chiqarib tashlanganligi sababli, uning oldingi yoki undan keyingi qismlari veb-sahifada qanday joylashtirilganligiga ta'sir qilmaydi.
Misol tariqasida - qarindoshlaringizning nisbati yordamida joylashtirilgan bo'linmaga ega bo'lsangiz (bu qiymati qisqa vaqt ichida ko'rib chiqamiz) va bu bo'linmada bo'linishning yuqori qismidan 50 pikselni qo'yish kerak bo'lgan xat bor edi. "yuqoridagi" xususiyatdagi 50px ofset qiymati bilan birga, bu paragrafga "mutlaq" pozitsiya qiymatini qo'shadi.
Lavozim: mutlaq; tepada: 50px;Bu mutlaqo joylashtirilgan element keyinchalik har doim bu normal joylashtirilgan bo'linishning 50 pikselini ko'rsatishi kerak. Sizning "mutlaqo" joylashtiriladigan elementingiz sizning kontekstingiz sifatida nisbatan joylashtirilganni ishlatgan va siz foydalanadigan joylashish qiymati nisbatan bo'lgan.
Siz foydalanishingiz mumkin bo'lgan to'rt joylashishni aniqlash xususiyati quyidagilardir:
- yuqori
- o'ng
- pastki qismida joylashgan
- chapda
Yuqori yoki pastki qismdan foydalanishingiz mumkin (chunki bu elementlar har ikkala qiymatga ko'ra joylashtirilmaydi) va o'ng yoki chapdan.
Agar element mutlaq holatda o'rnatilsa, lekin u erda statik ravishda joylashmagan ajdodlar bo'lmasa, u tananing eng yuqori elementi bo'lgan tananing elementiga nisbatan joylashadi.
Nisbiy joylashuv
Biz allaqachon nisbiy joylashuvni eslatib o'tdik, shuning uchun endi bu xususiyatni ko'rib chiqaylik.
Nisbiy joylashish bir xil to'rt joylashish xususiyatini absolyut joylashuv sifatida ishlatadi, lekin elementning eng yaqin statik ravishda joylashtirilgan ajdodiga o'rnini o'rniga o'rniga element normal oqimda bo'lsa, u yerdan boshlanadi.
Masalan, agar sizda veb-sahifangizda uchta xat bor va uchinchi "joylashuv: relative" uslubiga ega bo'lsa, u pozitsiyaning joriy joylashuviga qarab o'chib ketadi.
1-paragraf.
2-xat.
3-paragraf.
Yuqoridagi misolda, uchinchi paragraf konteyner elementining chap tomonida joylashgan, lekin hali ham birinchi ikki xatboshining ostiga tushib qoladi. U hujjatning normal oqimida qoladi va faqatgina biroz uzilib qolishi mumkin. Agar siz uni pozitsiyasiga o'zgartirsangiz: mutlaq; undan keyingi narsalar yuqorida ko'rsatiladi, chunki u hujjatning normal oqimida qolmaydi.
Veb-sahifadagi elementlar tez-tez pozitsion qiymatni belgilash uchun ishlatiladi: hech qanday ofset qiymati belgilanmagan, ya'ni element oddiy oqimda qaerda paydo bo'lishini bildiradi. Bu faqat shu elementni boshqa elementlarning mutlaqo joylashtirilishi mumkin bo'lgan kontekst sifatida belgilash uchun amalga oshiriladi. Misol uchun, sizning veb-saytingizni "konteyner" (veb-dizaynda juda ko'p ishlatiladigan stsenariy) sinfining bir qismiga ega bo'lishingiz bo'lsa, bu bo'linma nisbiy o'rniga o'rnatilishi mumkin, shunda ichidagi biror narsa Bu joylashuv mazmuni sifatida.
Ruxsat etilgan joylashuv haqida nima deyish mumkin?
Ruxsat etilgan joylashishni aniqlash mutlaq joylashishni aniqlash kabi juda ko'p. Elementning pozitsiyasi mutlaq model bilan bir xil tarzda hisoblab chiqiladi, lekin keyinchalik bu joyga qattiq elementlar o'rnatiladi - deyarli suv belgisi kabi. So'ngra sahifadagi hamma narsa bu elementni pastga aylantiradi.
Ushbu xususiyat qiymatidan foydalanish uchun quyidagilarni o'rnatishingiz mumkin:
lavozim: qattiq;Shuni esda tutingki, agar siz saytingizdagi elementni tuzatganingizda, u sizning veb-sahifangiz chop etilganda o'sha joyga chop etiladi. Misol uchun, agar sizning elementingiz sahifangizning yuqori qismida aniqlangan bo'lsa, u har bir chop etilgan sahifaning yuqori qismida paydo bo'ladi - chunki u sahifaning yuqori qismiga o'rnatiladi. Bosma nashrlarning qanday unsurlarni aks ettirishini o'zgartirish uchun media turlaridan foydalanishingiz mumkin:
@media ekrani {h1 # birinchi {pozitsiya: sobit; }} @media print {h1 # birinchi {pozitsiya: statik; }}Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 1/7/16 da tahrirlangan.