18.02.15 21,5K

Agar siz HTML-ga asoslangan biron bir veb-saytni kesib olsangiz, unda siz sharsimon tuzilishni ko'rasiz. Bundan tashqari, uning tashqi ko'rinishi bargli pirogga o'xshaydi. Agar shunday deb o'ylasangiz, ehtimol siz buni uzoq vaqt davomida qilmagansiz. Shunday qilib, hozircha ochligingizni qondiring, keyin biz sizga div to'pini saytingizning markazida qanday harakatlantirishni aytib beramiz:

Qo'shimcha teglar uchun tartib afzalliklari

Veb-sayt tuzilishining ikkita asosiy turi mavjud:

• Jadval;
• Blokova.

Jadval tartibi hatto Internet paydo bo'lishining boshida ham hukmron edi. Ushbu bosqichdan oldin siz belgilangan joylashuvning aniqligini ta'minlashingiz mumkin. Ale, kam emas, u erda aniq kamchiliklar mavjud. Ularning asosiylari - kodning hajmi va tortishishning past oqimi.

Jadvalning joylashuvi o'chirilgan bo'lsa, veb-sahifa to'liq ko'rsatilmaguncha ko'rsatilmaydi. Buning sababi, div bloklari tanlanganda, div elementlari bir vaqtning o'zida ko'rsatiladi.

Yuqori tezlik bilan blokka asoslangan saytning afzalligi HTML kodini bir necha marta o'zgartirish imkonini beradi. Bunga bir qator CSS sinflari kiradi.

Iltimos, sahifadagi ma'lumotlar taqdimotini tizimlashtirish uchun jadval tartibidan foydalaning. Klassik dumba o'rnatiladi va stol ko'rsatiladi.

Teglar asosida blok bloklari sferik deb ataladi va bloklarning o'zi to'plar deb ataladi. Buning sababi, kuchlarning qiymatlari tanlanganda, ularni Photoshop-dagi to'plarga o'xshash bir-birining ustiga qo'yish mumkin.

Joylashtirish xususiyatlari

Blok tartibida to'plarning joylashishini kaskadli uslublar jadvallari yordamida ishlatish osonroq. Renderlash uchun mas'ul bo'lgan CSS-ning asosiy kuchi floatdir.
Quvvat sintaksisi:
float: chap | to'g'ri | hech | meros
De:

• chap - elementni ekranning chap chetiga tekislang. Boshqa elementlarni o'rash o'ng qo'lda amalga oshiriladi;
• o'ng - o'ng qo'l, boshqa elementlar bilan o'ralgan - chap qo'l;
• hech - o'rashga yo'l qo'yilmaydi;
• meros - Vatan elementining qiymatini meros qilib olish.

Keling, qo'shimcha quvvat uchun div bloklarini joylashtirishning soddalashtirilgan misolini ko'rib chiqaylik:

#left (kenglik: 200px; balandlik: 100px; float: chap; fon: rgb(255,51,102); ) #right (kenglik: 200px; balandlik: 100px; float: oʻng; fon: rgb(0.2 oʻng blok)

Endi sahifaning markazidagi uchinchi divga qiymat qo'shishga harakat qilaylik. Floatning markaziy qiymati yo'qligi achinarli. Va yangi blokga qiymat berilganda, o'ngga yoki chapga tekislash ko'rsatilgan tomonga tayinlanadi. Bu barcha uchta blokning float: left ga ega bo'lishiga yo'l qo'ymaydi:
Ale eng yaxshi variant emas. Deraza o'zgartirilganda, to'plar vertikal ravishda bir qatorda kashta qilinadi va o'lcham kattaroq bo'lganda, ular derazaning chap chetiga yopishadi. Bu markazda divni tekislashning puxta usulini talab qiladi. To'plarni markazlashtirish

Old dumba boshqa elementlarni joylashtiradigan sharli idish bilan jihozlangan. Bu oynaning o'lchamini o'zgartirganda bloklarni biridan ikkinchisiga ayirish muammosini keltirib chiqaradi. Idishni o'rtada markazlashtirishga yuqori chetida nol qiymat va yon tomonlarda avtomatik (chegara: 0 avtomatik) chegara o'rnatish orqali erishiladi:

#konteyner (kenglik: 600px; hoshiya: 0 avtomatik; ) #chap (kenglik: 200px; balandlik: 100px; float: chap; fon: rgb(255,51,102); ) #oʻng (kenglik: 200px; balandlik: chap; fon : rgb(0,255,153) #center (kenglik: 200px; balandlik: 100px;

Ushbu misol divni gorizontal ravishda qanday markazlashtirishingiz mumkinligini ko'rsatadi. Va agar siz oddiygina kodni tahrir qilsangiz, bloklarning vertikal hizalanishiga erishishingiz mumkin. Buning uchun faqat konteyner to'pining pastki qismini o'zgartirishingiz kerak (uni o'zgartiring). Shunday qilib, CSS sinfingizni tahrir qilgandan so'ng, u quyidagicha ko'rinishi mumkin:

O'zgartirilgandan so'ng, barcha bloklar qat'iy ravishda o'rtada bir qatorga joylashtiriladi. Va bu holat brauzer oynasining o'lchamiga qarab o'zgarmaydi. O'q divni vertikal ravishda markazlashtirib, shunday ko'rinadi:

Keyingi qadam, to'plarni konteynerning o'rtasiga joylashtirish va kam quvvatli CSS-dan foydalanish:

#konteyner (kenglik: 450px; balandlik: 150px; chekka: 0 avtomatik; fon rangi:#66CCFF; ) #chap (kenglik: 100px; balandlik: 100px; fon: rgb(255,51,102); displey: inline-lock vertikal -align: o'rta; chekka-chap: 35px; ); inline-block: o'rtada - chap;

Biz ushbu misolda div ni div o'rtasida markazlashtirish uchun ishlatgan CSS vakolatlari va ularning ma'nolarining qisqacha tavsifi:

• displey: inline-block - blok elementi bir qatorga joylashtiriladi va uning boshqa elementga o'ralganligini ta'minlaydi;
• vertikal tekislash: o'rta - o'rtadagi vertikal element, Otanikiga o'xshash;
• margin-left - chap chetni o'rnatadi.

To'pdan qanday qilib pul ishlash mumkin

Men juda ajoyib ovoz berishni xohlayman, lekin iloji boricha. Har xil turdagi menyularni loyihalashda ba'zi div bloklari kerak bo'lishi mumkin. Keling, to'pni yuborishning amaliy misolini ko'rib chiqaylik:

#layer1( kengligi: 500px; balandlik: 100px; fon: rgb(51.255.204); chegara: groove; ) a (displey: blok; matnni tekislash: markaz; balandlik: 100%; ; ) Bizning veb-saytimizga joylashtirilgan

Ushbu misolda, displeyga qo'shimcha ravishda: blok qatori, biz blok elementining qiymatini o'rnatdik. Va div blokining barcha balandligi boshqarilishi uchun ular balandlikni o'rnatdilar: 100%. Blok elementlarini biriktirish va ko'rsatish

Blok elementlari interfeysning funksionalligini kengaytirish uchun ko'proq imkoniyatlarni taqdim etadi, garchi jadval tartibi eskirgan. Ko'pincha veb-sayt dizayni noyob va taniqli bo'lishi mumkin. Ammo bunday eksklyuziv uchun siz ko'p pul to'lashingiz kerak.

Asosiy sahifa ayniqsa qimmatlidir, chunki u reklama joylashtirishning eng katta afzalligiga ega. Shunday qilib, muammo boshqa reklama bannerini qaerga qo'yishdir. Va bu erda siz sahifaning markazida hech qanday divlarni ko'rmaysiz!

Kerakli blokni yaratish yanada oqilona echim bo'ladi. Eksa bu amalga oshirishning oddiy misolidir:

#layer1(displey:blok; eni: 500px; balandlik: 100px; fon: rgb(51,255,204); chegara:groove; ) funktsiya show() ( if(qatlam1=="yo'q") ( qatlam1="blok"; ) boshqa ( layer1="yo'q"; ) document.getElementById("layer1").style.display=layer1;

Bu jozibali tugma. Uni bosish kerak yoki bosilayotgan blokni ko'rsatish uchun.

HTML blok elementi blok elementining butun kengligini egallaydigan elementdir. Vatan elementi boshqa blok elementi yoki brauzer oynasi bo'lishi mumkin. CSS boshqaruvlaridan foydalanib, siz blok elementining kengligi va balandligini o'rnatishingiz mumkin. Blok elementlarining joylashuvi ularni brauzer oynasining o'rtasida va CSS boshqaruvi ostidagi joylashuvni, chap, yuqori, o'ng va pastda joylashtirish jarayonini anglatadi. CSS joylashuv quvvati joylashishni aniqlashning to'rtta turidan birini aniqlash uchun ishlatiladi: statik, mutlaq, sobit va nisbiy. Boshqa CSS organlari va chap, yuqori, o'ng va pastki Ota elementining chap, yuqori, o'ng va pastki qirralarini aniqlash uchun ishlatiladi. Shuningdek, blok elementlari, berilgan quvvat darajalarini hisobga olgan holda, bir-birining ustiga chiqishi mumkin va bu qobiliyat saytlarda g'alaba qozonishi mumkin.

Qolganlari uchun (statik)

Agar siz blok elementi yoki ko'rsatilgan statik joyni ko'rsatmagan bo'lsangiz, u bir xil bo'lsa, blok elementlari tartibda joylashtiriladi. Bundan tashqari, hujum bloki (masalan: qizil) yangi qatordan kengaytiriladi. Bundan tashqari, bu joylashuv chap, yuqori, o'ng va pastki qismlarni o'z ichiga olmaydi.

Mutlaq joylashishni aniqlash

Mutlaq joylashishni aniqlashda elementning joylashuvi chap, yuqori, o'ng va pastki boshqaruv elementlari tomonidan o'rnatiladigan qo'shimcha boshqaruv elementlari orqasida brauzer oynasining chetlari bo'ylab o'rnatiladi. Agar siz bir vaqtning o'zida chap va o'ng tomonlarni ko'rsatsangiz va ular bir-biriga juda yaxshi o'qilishi mumkin bo'lsa, u holda ustuvorlik chapga, yuqori va pastki qismiga ustunlik beriladi, bu holda yuqoriga ko'proq ustunlik beriladi. Mutlaq joylashishni aniqlash ko'pincha dizayn maqsadlari uchun maxsus joylashishni aniqlash bilan birlashtiriladi, agar bir xil elementlarning turli elementlarini joylashtirish kerak bo'lsa, shuning uchun u menyu, sayt tartibi va boshqalar uchun ham o'rnatilishi mumkin .d.

Ruxsat etilgan joylashuv (qattiq)

Ruxsat etilgan joylashishni aniqlash boshqa joylashuv turlaridan farqlanadi va sahifani aylanayotganda kontent bilan bir vaqtda harakatlanmaydi. Belgilangan joylashuvga ega blok elementlari chap, yuqori, o'ng va pastdan brauzer oynasining chetlariga bog'langan. Ruxsat etilgan joylashishni aniqlash ramka interfeyslarini (brauzer oynasi bir nechta sohalarga bo'lingan), qattiq menyuni, sayt uchun sobit altbilgini va "doimiy" bloklarni (xabarlar, ijtimoiy tugmalar va boshqalar) yaratish uchun o'rnatiladi.

Nisbiy pozitsiya

Joriy holat joriy oqim pozitsiyasining chap, yuqori, o'ng va pastki qo'shimcha bo'limlari orqasida o'rnatiladi.

Biroq, blokning bu pozitsiyasi qo'shimcha marj kuchi yordamida yaratilishi mumkin.

Mutlaq joylashish o'ziga zid bo'lishi shart emas, lekin mutlaq joylashuvdan darhol chiqib ketish muhimdir.

Keling, variantlarni ko'rib chiqaylik:

Joylashuv bloki olib tashlanganda, quvvat o'rnatiladi pozitsiya: nisbiy bu kuch olib tashlandi. Ushbu turdagi joy almashinuvi "Batkovskiy" elementi (mutlaq joylashish holatida bo'lgani kabi) tufayli emas, balki oddiy oqim blokining o'zi bilan bog'liq. Amalda aniqroq bo'ladi. Keling, uchta divli html sahifaga ega bo'lamiz:

Maxsus joylashishni aniqlash

Keling, uslublar jadvalida ushbu bloklar orasidagi bloklarning o'lchamini o'rnatamiz:

#blok1, #blok2, #blok3 (chegara: 1px toʻliq qizil; eni: 150px; balandlik: 50px; )

Bizning brauzer sahifamiz endi shunday ko'rinadi:

Endi boshqa blokning o'rnini o'zgartiramiz, buning uchun biz uslub tomoniga qoida qo'shamiz:

#blok1, #blok2, #blok3 (chegara: 1px toʻliq qizil; eni: 150px; balandlik: 50px; ) #blok2(pozitsiya:nisbiy; chap:50px; tepa:25px; )

Endi bizning sahifamiz quyidagicha ko'rinadi:

Bizning boshqa blokimiz normal oqimni boshdan kechirmasdan oldin pastga va o'ngga siljidi. Boshqa bloklar o'z pozitsiyalarini yo'qotdilar. Amalda, joylashishni aniqlash kamdan-kam hollarda to'xtab qoladi, shuning uchun biz endi suzuvchi bloklarni hurmat qilmaymiz.

Suzuvchi bloklar

Bu bloklarni oldingi sxemalardagi kabi piksel aniqligi bilan joylashtirish mumkin emas, lekin bu joylashish sxemasi yanada kengroq. Noyob sayt suzuvchi bloklarsiz ishlashi mumkin va ularsiz sayt uchun silliq tartibni yaratish mutlaqo mumkin emas.

Bunday bloklar yon tomondan erkin harakatlanishi mumkin, xuddi shunday tarzda, rasmlar HTML-ga joylashtirilishi mumkin, qo'shimcha parametr bilan tasdiqlanadi. tekislash.

Suzuvchi bloklar hokimiyat tomonidan belgilanadi suzmoq, ya'ni blok suzadi va qaysi yo'nalishda harakat qiladi. Uchta variant mavjud:

• chap- blok chap chetiga bosiladi, elementlarning ramkasi uning atrofida o'ng tomondan oqadi.


• to'g'ri- blok o'ng chetiga bosiladi, elementlarning ramkasi uning atrofida chap tomondan oqadi.


• yo'q- blok ko'chirilmagan yoki to'g'ri joylashtirilgan pozitsiya.

Keling, dumbaga hayron bo'laylik. Keling, quyidagi kodli html sahifaga ega bo'laylik:

Bloklarning joylashishi

1-blok uchun matn

Quyidagi kod bilan style.css ning birinchi tomoni:

#blok1 (chegara: 1px toʻliq qizil; kenglik: 150px; balandlik: 50px; )

Bizning brauzer sahifamiz endi shunday ko'rinadi:

Keling, blokimizni suzuvchi qilaylik va uni chap chetiga bosing:

#blok1(chegara:1px toʻliq qizil; kenglik:150px; balandlik:50px; float:chap; )

Endi blokni o'ng chetiga siqib chiqamiz:

#blok1(chegara: 1px toʻliq qizil; kenglik: 150px; balandlik: 50px; float: oʻng; )

Endi bizning brauzer sahifamiz quyidagicha ko'rinadi:

Agar ramkaning yon tomonida suzuvchi bloklar bo'lsa, nima bo'ladi? Html sahifamizga yana bitta blok qo'shamiz:

Bloklarning joylashishi

1-blok uchun matn

2-blok uchun matn

Faqat sahifadagi ba'zi elementlar. Bu faqat matn, xabarlar, ro'yxatlar, rasmlar va boshqalar bo'lishi mumkin.

Men ularga kuchning turli ma'nolarini beraman suzmoq:

#blok1(chegara:1px toʻliq qizil; eni:150px; balandlik:50px; float:chap; ) #blok2(chegara:1px toʻliq qizil; width:150px; balandlik:50px; float:oʻng; )

Endi bizning brauzer sahifamiz quyidagicha ko'rinadi:

Ularda yana qanday ma'nolar bo'ladi? Masalan:

#blok1(chegara:1px toʻliq qizil; eni:150px; balandlik:50px; float:chap; ) #blok2(chegara:1px toʻliq qizil; width:150px; balandlik:50px; float:chap; )

Keyin boshqa blokni birinchi blokning o'ng chetiga bosing:

Xuddi shu qiymatlar uchun vaziyat o'xshash bo'ladi to'g'ri:

#blok1(chegara:1px toʻliq qizil; en:150px; balandlik:50px; float:oʻng; ) #blok2(chegara:1px toʻliq qizil; width:150px; balandlik:50px; float:oʻng; )

Uni orqaga buring: 1-blokni o‘ng chetiga, so‘ngra keyingisiga 2-blokni bosing.

Biz qilmoqchi bo'lgan narsa, bloklarning o'ng chetiga bosilganligiga ishonch hosil qilishdir yoki ular bitta ostidadir. Kuch kim uchun? aniq Bu shuni anglatadiki, suzuvchi blokning qaysi tomonlari boshqa suzuvchi bloklar yonida o'tira olmaydi. Ushbu quvvat to'rtta qiymatdan biriga o'rnatilishi mumkin:

• chap- blok barcha chap qirrali bloklardan pastroqqa aylanishi mumkin.


• to'g'ri- blok barcha o'ng qirrali bloklardan pastroq o'sishi mumkin.


• ikkalasi ham- blok barcha suzuvchi bloklar ostida o'sishi mumkin.


• yo'q- Chegara yo'q, bu ishlab chiqaruvchilar uchun muhim.

Keling, bu quvvatni boshqa blok uchun qolgan dumbamizga joylashtiramiz:

#blok1(chegara:1px toʻliq qizil; en:150px; balandlik:50px; float:oʻng; ) #blok2(chegara:1px toʻliq qizil; width:150px; balandlik:50px; float:oʻng; aniq:oʻng; )

Endi men xohlagandek bo'ldi: bir blok ikkinchisining ostida:

Oldingi darsda biz qo'shimcha mutlaq joylashishni aniqlash uchun quyidagi tomonda ishladik:

Keling, suzuvchi bloklar yordamida qanday qilib pul ishlashingiz mumkinligini ko'rib chiqaylik. Shuningdek, hujum sahifasining o'zi uchun kod:

Bloklarning joylashishi

veb-sayt sarlavhasi

Tarkib

yangi mahsulotlar bloki

saytning pastki qismida

Style.css sahifasida biz bloklarimiz uchun birinchi o'lcham va fonni o'rnatamiz:

#header( fon: toʻq qizil; kenglik: 715px; balandlik: 100px; ) #menyu( fon:eski; kenglik:190px; balandlik:300px; ) #content( fon:oldlace; en:525px; balandlik:300px; ) #fo (fon: to'q qizil; kenglik: 715 piksel; balandlik: 30 piksel; ) # yangiliklar (fon: sariq; kenglik: 150 piksel; balandlik: 280 piksel; )

Nina, bizning bloklarimiz odatdagidek o'sib chiqadi. bir ostida. Biz bloklarni yasashimiz kerak menyuі mazmuni suzuvchi va chap qo'l. Blok Yangiliklar Keyin o'ng chetiga qadar siqib qo'yishingiz mumkin. Bu o'ng qo'lda suzuvchi blok yordamida amalga oshiriladi:

#header( fon: toʻq qizil; kenglik: 715px; balandlik: 100px; ) #menyu( fon:eski; kenglik:190px; balandlik:300px; float:chap; ) #content(fon:oldlace; width:525px; balandlik:300px ; float:left;) #footer( fon: to'q qizil; width:715px; height:30px; ) #news(fon:sariq; width:150px; height:280px;

Bizning brauzer sahifamiz quyidagicha ko'rinadi:

Bizning yangiliklar blokiga nazar tashlasak, u blokdagi matn ostida joylashganligi aniq mazmuni. Biz, shuningdek, yangiliklar bloki o'ng qo'lda bo'lishini va matn atrofida chap qo'lda aylanishini xohladik.

Nega bu biz uchun ish bermadi? Chunki bizning blok Yangiliklar Html kodi matn ostida kengaytiriladi va faqat uning ostida kengaytirilgan matn atrofida aylanadi. Buni tuzatish uchun biz o'zimizni joylashtirishimiz kerak div="yangiliklar" matn tepasida ("tarkib" so'zidan oldin):

Bloklarning joylashishi

veb-sayt sarlavhasi

yangi mahsulotlar bloki

Tarkib

saytning pastki qismida

Endi bizning yangi mahsulotlar blokimiz o'z o'rnida:

Va u yuqori va o'ng qirralarga bosilmasligi uchun biz ushbu blok uchun maydon qiymatlarini qo'shamiz:

#news(fon: sariq; kenglik: 150px; balandlik: 280px; float: o'ng; chekka: 10px; )

Endi biz mutlaq joylashuv bilan bir xil natijaga erishdik.

Kutib turing, suzuvchi bloklar yordamida yon tomonni yotqizish osonroq: siz piksellarni ochishingiz shart emas va kod qisqa. Bundan tashqari, qo'lda tartib bilan biz blokning ekrandagi aniq o'rnini aniqlay olmaymiz va suzuvchi bloklar yordamida bizga kerak emas, faqat yo'nalishni ko'rsatish kifoya (chap qo'l, o'ng qo'l, pastki yoki bir xil qatorda).

Ruxsat etilgan bloklar

Esingizda bo'lsa, pozitsiya aniqlanganda, blok ko'rish maydoniga o'rnatiladi. Qo'shiq tuyg'ularida ramkalarni taxmin qilish uchun qattiq bloklar mavjud. Faqat ramkaning o'rtasida aylantirish mumkin, lekin blokning o'rtasida aylantirish yo'q.

Ruxsat etilgan bloklarning bitta kamchiligi bor: ular Internet Explorer brauzerlari tomonidan qo'llab-quvvatlanmaydi. Va ularga qarshi g'oliblik belgisi hali ham yo'q. Shunday qilib, bu erda biz faqat bunday qoidaning sintaksisini tushuntirishimiz kerak, agar siz buni o'zingiz sinab ko'rmoqchi bo'lsangiz (masalan, Opera brauzerida).

#blok(pozitsiya: belgilangan; chap: 0px; tepa: 0px; )

Sahifani aylantirganda "blok" identifikatoriga ega blok o'z joyidan olib tashlanadi.

Bugun hammasi shu. Kelgusi darsda biz bloklarning turli xil vakolatlari va ularning turlari haqida ko'proq bilib olamiz.

Bugungi kunda veb-ishlab chiquvchilar turli xil CSS texnikasidan foydalangan holda murakkab veb-sahifalar maketlarini yaratishlari mumkin. Ushbu usullarning ba'zilari uzoq tarixga ega (float), boshqalari (flexbox) asrlar davomida mashhurlikka erishgan.

Ushbu maqolada biz CSS joylashuvi bo'yicha kichik o'lchamli nutqning harakatlarini diqqat bilan ko'rib chiqamiz.

Ishni boshlashdan oldin, keling, turli xil joylashishni aniqlashning asoslarini qisqacha ko'rib chiqaylik.

Mavjud joylashishni aniqlash usullarini ko'rib chiqish

CSS pozitsiyasining kuchi elementni joylashtirish turini ko'rsatadi.

Joylashuv variantlari

statik - ong orqasidagi pozitsiyaning kuchining qiymati. Sizga shuni ma'lum qilmoqchimizki, bu element vikorist joylashuv emas - joylashishni aniqlash sukut bo'yicha o'rnatilgan joylashishni aniqlash turini belgilashingiz bilanoq o'rnatiladi.

Ushbu quvvat pozitsiyasi talabi uchun quyidagi qiymatlardan birini o'rnating:

• qarindosh
• mutlaq
• belgilangan
• yopishqoq

Va faqat pozitsiyani o'rnatganingizdan so'ng, siz elementni almashtirish uchun hokimiyatga murojaat qilishingiz mumkin:

• to'g'ri
• pastki
• Pochatkovda hokimiyatning ma'nosi avto kalit so'zdir.

Shuni ta'kidlash kerakki, agar element mutlaq yoki sobit bo'lgan pozitsiya qiymatiga ega bo'lsa, u mutlaqo pozitsion element hisoblanadi. Shuningdek, pozitsion elementlar z-indeks kuchiga ega bo'la boshlaydi, bu stacking tartibini ko'rsatadi.

Joylashtirishning asosiy usullari orasidagi farqlar

Keling, mavjud joylashishni aniqlash turlari o'rtasidagi uchta asosiy farqni tezda ko'rib chiqaylik:

• Mutlaq joylashtirilgan elementlar oqimdan butunlay ko'rinadi va ularning o'rnini eng yaqin o'rindiqlar egallaydi.
• Yaxshi joylashtirilgan (nisbiy) va yopishtirilgan (yopishqoq) yaqin atrofdagi qo'shnilar o'z o'rnini egallamasligi uchun o'z joylarini saqlab qoladilar. Biroq, bu elementlarning kirish joylari bo'sh joyni egallamaydi, lekin boshqa elementlar tomonidan butunlay e'tiborga olinmaydi va elementlarning bir-birining ustiga chiqishiga olib kelishi mumkin.
• Ruxsat etilgan elementlar (va mutlaq xilma-xillikning o'zgarmas joylashuvi) har doim ko'rinish zonasida (ajdodlarda joylashishni hisobga olmaganda) joylashadi, xuddi yopishtirilgan elementlar eng yaqin ajdodning odosini aylantirish bilan (toshib ketish: avtomatik) joylashganidek. Va bunday ajdodlar yo'qligi sababli, hid ko'rish zonasida joylashgan.

Hisobotni demoda ko'rishingiz mumkin:

Eslatma: ma'lumotlar bazasida "yopishqoq elementlar" ning joylashishi brauzerlarni qo'llab-quvvatlaydigan eksperimental texnologiyadir. Albatta, siz ushbu funksiyani brauzerga qo'shish uchun polifayldan foydalanishingiz mumkin, ammo past kenglikdagi muhitda bu quvvat statistikada muhokama qilinmaydi.

Mutlaq joylashishni aniqlash turidan foydalangan holda joylashtirish elementlari

Ishonamanki, ko'pchilik mutlaq joylashish tamoyilini bilishadi. Biroq, yangi boshlanuvchilar bu yangi joyda ko'p pul olishlari mumkin.

Shuning uchun, men joylashishni aniqlashning kamroq tarqalgan xususiyatlarini tavsiflashda shu bilan boshlashga qaror qildim.

Shuning uchun, mutlaq joylashtirilgan element o'zining eng yaqin ajdodiga ko'ra joylashadi. Albatta, bu kimningdir pozitsiyasi statik holatga o'rnatilgan bo'lsa, to'g'ri - agar elementning pozitsion ajdodlari bo'lmasa, u ko'rish zonasiga mos ravishda almashtiriladi.

Buni oyoq dumbasi ko'rsatadi:

Ushbu demo yashil blokda joylashuv bloki mavjud, pastki qismida mutlaqo nol kirishlar mavjud: 0 va chap: 0 va uning ajdodi (yurak bloki) joylashishni aniqlash to'plamiga ega emas.

Biroq, biz tashqi burnerni aniq joylashtirdik (jumbotron sinfiga ega element). Iltimos, ajdodlarining joylashuv turini o'zgartirganda yashil blokning pozitsiyasi qanday o'zgarishiga e'tibor bering.

Mutlaqo joylashtirilgan elementlar float quvvatini e'tiborsiz qoldiradi

Agar biz suzuvchi elementni mutlaq yoki qat'iy holatga o'rnatsak, floatning kuchi "hech" ga o'rnatiladi. Boshqa tomondan, agar biz uni ma'lum bir joyga qo'ysak, element suzuvchi holatga keladi.

Yuqoridagi demoga qarang:

Ushbu dumbada o'ng qo'l bilan birlashtirilishi kerak bo'lgan ikki xil element mavjud. E'tibor bering, agar qizil blok mutlaqo pozitsion bo'lsa, yashil blok float qiymatlarini saqlaganidek, float qiymatlarini e'tiborsiz qoldiradi.

Mutlaqo joylashtirilgan kichik elementlar bloklanadi

Mutlaq yoki qat'iy joylashuvga ega qator elementi blok elementining kuchini oladi. Blokdagi kichik elementlarning keyingi konvertatsiyasi jadvalda tasvirlangan.

Shu nuqtada biz ikki xil element yaratdik. Birinchisi (yashil blok) blok elementi, ikkinchisi (qizil blok) maliandir. Boshning orqa tomonida yashil blokni ko'rishingiz mumkin.

Qizil blok ko'rinmaydi, chunki kenglik va balandlik sozlamalari faqat blok va qator-blok elementlari bilan ishlaydi va ularning hech birida tarkib yo'qligi sababli muntazam o'lchamlar yo'q.

Yurak blokiga mutlaq yoki qat'iy pozitsiyani belgilaganingizda, u blokga aylanadi va blok yangi o'lchamda ishlay boshlaydi.

Mutlaqo joylashtirilgan elementlarda tashqi kirishlarning qulashi yo'q

Yuvishdan so'ng, agar ikkita vertikal tashqi kirish to'qnashsa, hid ularning maksimaliga teng bo'lgan biriga birlashadi. Bu tashqi kirishlarning qulashi deb ataladi.

Bu erda mutlaqo pozitsion elementlarning harakati suzuvchi elementlarga o'xshaydi - ularning kirishlari tomirlarga ulanmagan.

Ushbu demo vazifa elementi 20 pikselli kirishga ega. Ushbu yondashuv Ota elementining kiritilishi bilan qulab tushadi, bu ham 20 pikselga teng. Ma'lumki, mutlaq joylashuv tufayli hech qanday qulash yo'q.

Qanday qilib kiraverishning taqillatilishidan qochishimiz mumkin? Ularning orasiga qandaydir ajratgich qo'yishimiz kerak.

Ichki to'ldirish yoki chegara bo'lishi mumkin, ular ota-ona yoki yordamchi elementga joylashtirilishi mumkin. Yana bir variant - Otaning elementiga aniq tuzatish kiritish.

Elementlarni piksellar va balandliklar bilan joylashtirish

Elementlarni joylashtirish uchun piksellarni almashtirish foizini hech qachon ishlatganmisiz? Agar bu to'g'ri bo'lsa, tanlangan element tanlangan hisoblash birliklariga (piksel yoki yuzlab) bog'liqligini bilasiz.

Bu biroz bentage, shunday emasmi? Endi, birinchi qarashda, spetsifikatsiya videokameralarga obuna bo'lishi ajablanarli:

Bloklardagi siljish Ota blokining kengligi (chap va o'ng uchun) va balandligi (yuqori va pastki) ga asoslanadi. Yelimlangan elementlar uchun birikma oqimning kengligi (chap va o'ng uchun) va balandligi (yuqori yoki pastki) bo'yicha qoplanadi. Qabul qilinadigan salbiy qiymatlar.

Aytganimizdek, ramkada ma'lum bir tartibga solish bilan elementning pozitsiyasi otasining kengligi va balandligiga bog'liq.

Demo bu farqni ko'rsatadi:

Ushbu ilovada yuklab olish uchun piksellar va ko'rinishlar ishlatiladi. Albatta, piksellar o'rnatilganda, element kerak bo'lgan joyda yo'q qilinadi.

Va agar biz ayirish uchun o'lchamlarni tanlasak, natija ota elementining o'lchamlariga bog'liq. Vizualizatsiya o'qi yangi pozitsiya qanday qoplanishini ko'rsatadi:

Eslatma: siz bilganingizdek, o'zgartirish quvvati (turli xil tarjima funktsiyalari bilan bir qatorda) elementning o'rnini o'zgartirishga ham imkon beradi. Ammo bu holda, yuzlab turli o'lchamlarni tanlayotganda, o'lcham elementning otasiga emas, balki uning o'lchamiga qarab belgilanadi.

Visnovok

Umid qilamanki, ushbu maqola sizga CSS joylashuvini yaxshiroq tushunishga yordam berdi va ba'zi asosiy nozikliklarni aniqladi.

Hali ham CSS-da mutlaq joylashishni aniqlash qanday ishlashi va elementlarni ekranda ko'rsatishi haqida chalkashmisiz? Keling, bu sehrni tushunaylik.

Pozitsiyani o'rnatganingizda: mutlaq elementning o'zi emas, balki uning eski konteyneri va CSS-dagi joylashuvi ham birinchi o'ringa chiqadi. Buning katlanuvchanligi har doim markaziy element hisoblanadi.

Keling, birin-ketin ona tamoyilini qo'yib, divalarga asoslangan kodni ko'rib chiqaylik.

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

Bloklar quti-1, quti-2 va quti-3 qo'shimcha chegara boshqaruvlari yordamida go'zallik uchun markazlashtirilgan: avtomatik va moslashuvchan CSS boshqaruvlari. Box-4 bloki joriy hujjatdagi standart holatidan olib tashlanadi.

korpus (displey: flex; ) .box-1, .box-2, .box-3 (displey: flex; chekka: avtomatik; )

tana( displey: moslashuvchan; Quti-1, Quti-2, Quti-3 ( displey: moslashuvchan; Marja: avtomatik;

Barcha 4 element standart holatda. Ayni paytda tartib quyidagicha ko'rinadi:

.box-4 joylashuvsiz joylashishni aniqlashda nima shov-shuv?

O'zingizni joylashtirish uchun elementni ikki so'zga bo'lish mumkin:

• qanday ota nuqtai nazarga aylanadi;
• oldingi nuqtaga qisqartirish miqdori (yonish, pastda, o'ng yoki chap qo'lda).

Agar siz joylashuv: absolyutni quti-4 ga o'rnatsangiz, bu element hujjatning normal oqimini bloklaydi. Agar siz darhol o'z joyingizda yo'qolgan bo'lsangiz, koordinatalar ko'rsatilmagan. CSS-da elementning kengligi ko'rsatilmaganligi sababli, u o'rniga elementning asl kengligidan foydalanadi (plyus to'ldirish va chegara).

.box-4 joy almashmasdan mutlaq joylashish bilan

Endi quvvat tepasini qo'shamiz: 0 va chap: 0 . Element qaysi Otaning konteyneri ushbu koordinatalarda nuqta bo'lishini aniqlashi kerak. Bu statik bo'lmagan pozitsiyaga ega eng yaqin element (ko'pincha pozitsiya: nisbiy). quti-4 u orqali ajdodlariga taqlid qila boshlaydi. Na quti-3, na quti-2, na quti-1 mos emas, chunki CSS-da joylashishni aniqlash sozlanmagan bo'lishi mumkin.

Agar ajdodning joylashuvi noma'lum bo'lsa, element hujjatning tanasiga yaqin joylashtiriladi:

.box-4 mutlaq joylashuvi bilan. Joylashuvsiz vatan elementlari

Agar siz 1-quti elementiga nisbatan pozitsiyani o'rnatsangiz, oldingi nuqta quyidagicha bo'ladi:

.box-4 mutlaq joylashuvi bilan. .box-1 etakchi o'rinlarga ega

Mutlaq joylashtirilgan element joylashtirilayotgan eng yaqin ajdod asosida kengaytiriladi.

Nuqta topilgandan so'ng, DOM daraxtidagi hamma narsa ahamiyatsiz bo'ladi.

Agar siz joylashuvni o'rnatgan bo'lsangiz: 2-qutiga nisbatan bir xil bo'lsa, u holda quti-4, hatto uning ajdodi yaqinroq bo'lsa ham, mos ravishda joylashtiriladi.

.box-4 mutlaq joylashuvi bilan. .box-2 yetakchi mavqega ega

Xuddi shunday quti-3 konteyner uchun:

Dastur