Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsalarni tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, ushbu maqola CSS xususiyatlariga bag'ishlangan. pozitsiya va suzmoq.
1. pozitsiya: statik
Odatiy bo'lib, sahifadagi barcha elementlar statik ravishda joylashtirilgan (pozitsiya: statik), demak, element joylashtirilmagan va hujjatda odatdagi joyida, ya'ni html belgilashdagi kabi tartibda paydo bo'ladi.
Ushbu xususiyatni biron bir elementga maxsus tayinlashning hojati yo'q, agar siz ilgari o'rnatilgan joylashishni sukut bo'yicha o'zgartirmasangiz.
#content (pozitsiya: statik;)
2. mavqe: nisbiy
Lavozim: nisbiy elementni normal joylashishda paydo bo'ladigan joyga nisbatan yuqori, pastki, chap va o'ng xususiyatlaridan foydalanishga imkon beradi.
#Contentni 20 piksel pastga va 40 piksel chapga siljitamiz:
#content (pozitsiya: nisbiy; tepa: 20px; chap: -40px;)
E'tibor bering, hozirda bizning #content blokimiz bo'lishi kerak bo'lgan bo'sh joy mavjud. #Content blokidan so'ng, #footer bloki pastga siljimadi, chunki #content hanuzgacha hujjatda, biz uni ko'chirgan bo'lsak ham bo'ladi.
Ushbu bosqichda, nisbiy joylashishni aniqlash unchalik foydali emasdek tuyulishi mumkin, ammo xulosa qilishga shoshilmang, keyinroq maqolada siz uni nima uchun ishlatishingiz mumkinligini bilib olasiz.
3. lavozim: mutlaq
Mutlaq joylashishni aniqlash (pozitsiya: mutloq) bilan element hujjatdan olib tashlanadi va siz aytgan joyda paydo bo'ladi.
Misol tariqasida # div-1a blokini sahifaning yuqori, o'ng burchagiga o'tkazamiz:
# div-1a (pozitsiya: mutlaq; tepa: 0; o'ng: 0; kenglik: 200px;)
E'tibor bering, bu safar # div-1a bloki hujjatdan olib tashlanganligi sababli, sahifadagi qolgan elementlar boshqacha joylashtirilgan: # div-1b, # div-1c va #footer o'chirilgan blok joylashgan joyga ko'tarilgan. Va # div-1a blokining o'zi sahifaning yuqori o'ng burchagida joylashgan.
Shunday qilib, biz har qanday elementni sahifaga nisbatan joylashtira olamiz, ammo bu etarli emas. Aslida, biz # div-1a-ni ota-ona #kontent blokiga nisbatan joylashtirishimiz kerak. Va shu nuqtada nisbiy joylashish yana paydo bo'ladi.
4. lavozim: sobit
Ruxsat etilgan joylashishni aniqlash (pozitsiya: belgilangan) - bu mutlaq joylashishni aniqlashning kichik bo'limi. Uning yagona farqi shundaki, u doimo ekranning ko'rinadigan maydonida bo'ladi va sahifani siljitish paytida harakat qilmaydi. Shu nuqtai nazardan, u biroz belgilangan fon rasmiga o'xshaydi.
# div-1a (pozitsiya: belgilangan; tepa: 0; o'ng: 0; kenglik: 200px;)
IE-da pozitsiya bilan: har bir narsa biz xohlagancha silliq emas, lekin mavjud ko'p usullar ushbu cheklovlarni chetlab o'ting.
5. pozitsiya: nisbiy + pozitsiya: mutlaq
#Content blokiga nisbiy joylashishni (pozitsiya: nisbiy) belgilash orqali biz har qanday bola elementlarini uning chegaralariga nisbatan joylashtira olamiz. # Div-1a blokini #ontent blokining yuqori o'ng burchagiga joylashtiramiz.
#content (pozitsiya: nisbiy;) # div-1a (pozitsiya: mutlaq; yuqori: 0; o'ng: 0; kenglik: 200px;)
6. Ikkita ustun
Oldingi qadamlardan olingan bilimlar bilan qurollanib, siz nisbiy va mutlaq joylashishni aniqlash yordamida ikkita ustun yasashga urinib ko'rishingiz mumkin.
#content (pozitsiya: nisbiy;) # div-1a (pozitsiya: mutlaq; tepa: 0; o'ng: 0; kenglik: 200px;) # div-1b (pozitsiya: mutlaq; yuqori: 0; chap: 0; kenglik: 200px ;)
Mutlaq joylashishni afzalliklaridan biri bu elementlarni belgilashda qanday bo'lishidan qat'iy nazar har qanday tartibda joylashtirish qobiliyatidir. Yuqoridagi misolda # div-1b bloki # div-1a blokidan oldin joylashtirilgan.
Va endi sizda bir savol bo'lishi kerak: "Bizning misolimizdagi qolgan elementlar qaerga ketdi?" Ular mutlaqo joylashgan bloklar ostida yashirinishdi. Yaxshiyamki, buni tuzatishning bir usuli bor.
7. Belgilangan balandlikka ega ikkita ustun
Yechimlardan biri ustunlarni o'z ichiga olgan idishni belgilangan balandlikka o'rnatishdir.
#content (pozitsiya: nisbiy; balandlik: 450px;) # div-1a (pozitsiya: mutlaq; tepa: 0; o'ng: 0; kenglik: 200px;) # div-1b (pozitsiya: mutlaq; tepa: 0; chap: 0 ; kengligi: 200 piksel;)
Yechim unchalik mos emas, chunki biz ustunlar ichida qanday hajmdagi matn bo'lishini va qaysi shriftdan foydalanilishini oldindan bilmaymiz.
8. Suzish
Balandligi o'zgaruvchan ustunlar uchun mutlaq joylashish mos emas, shuning uchun boshqa variantni ko'rib chiqamiz.
Blokni suzib o'tib, biz uni iloji boricha o'ngga (yoki chapga) chetga suramiz va blokdan keyingi matn uning atrofiga o'raladi. Bu odatda rasmlar uchun ishlatiladi, ammo biz uni yanada murakkab vazifada foydalanamiz, chunki bu bizning ixtiyorimizda yagona vosita.
# div-1a (suzuvchi: chap; kenglik: 200px;)
9. "Suzuvchi" karnaylar
Agar biz float: chapni birinchi blokga, so'ngra suzuvchi: chapdan ikkinchisini tayinlasak, bloklarning har biri chap tomonga o'raladi va biz o'zgaruvchan balandlikdagi ikkita ustunni olamiz.
# div-1a (float: left; width: 150px;) # div-1b (float: left; width: 150px;)
Bundan tashqari, siz ustunlarga teskari suzuvchi qiymatni belgilashingiz mumkin, bu holda ular idishning chekkalari bo'ylab taqsimlanadi.
# div-1a (float: right; width: 150px;) # div-1b (float: left; width: 150px;)
Ammo endi bizda yana bir muammo bor - ustunlar ota-konteynerdan tashqariga chiqadi va shu bilan butun tartibni buzadi. Bu boshlang'ich maket dizaynerlari uchun eng keng tarqalgan muammo, ammo uni juda sodda tarzda hal qilish mumkin.
10. Float-ni tozalash
Float tozalash ikki usulda amalga oshirilishi mumkin. Agar ustunlardan keyin boshqa blok bo'lsa, uni aniq belgilang: ikkalasi ham.
# div-1a (float: left; width: 190px;) # div-1b (float: left; width: 190px;) # div-1c (aniq: ikkalasi;)
Yoki ota-konteynerga overflow: hidden xususiyatini tayinlang
#content (to'ldirish: yashirin;)
Qanday bo'lmasin, natija bir xil bo'ladi.
Xulosa
Bugungi kunda faqat asosiy joylashishni aniqlash texnikasi va eng oddiy misollar ko'rib chiqildi. Bundan tashqari, boshlang'ich maket dizaynerlariga yordam berish uchun men har doim Ivan Sagalaevning bir qator maqolalarini tavsiya qilaman, bu bir vaqtning o'zida menga katta yordam berdi.
Oxirgi yangilanish: 28.04.2016
CSS elementni joylashtirish imkoniyatini beradi, ya'ni biz elementni sahifaning ma'lum bir joyiga joylashtirishimiz mumkin
CSS-da joylashishni aniqlashni boshqaradigan asosiy xususiyat bu pozitsiya xususiyati. Ushbu xususiyat quyidagi qiymatlardan birini olishi mumkin:
statik: standart elementni joylashuvi, sukut bo'yicha
mutlaq: element konteyner elementi chegaralariga nisbatan joylashtirilgan, agar u elementning pozitsiya xususiyati statik bo'lmasa
nisbiy: Element standart holatiga nisbatan joylashtirilgan. Odatda, nisbiy joylashishni aniqlashning asosiy maqsadi elementni siljitish emas, balki ichki joylashtirilgan elementlarning mutlaq joylashuvi uchun yangi biriktiruvchi nuqtani o'rnatishdir.
sobit: element brauzer oynasiga nisbatan joylashtirilgan, bu aylantirish paytida holatini o'zgartirmaydigan sobit elementlarni yaratishga imkon beradi.
Siz bir vaqtning o'zida float xususiyati va statikdan tashqari har qanday joylashishni aniqlash turini (ya'ni standart tur) elementga qo'llamasligingiz kerak.
Mutlaq joylashishni aniqlash
Brauzerning ko'rish oynasi yuqori, pastki, o'ng va chap qirralarga ega. Ushbu to'rt qirralarning har biri uchun tegishli CSS xususiyati mavjud: chap (chap chekka), o'ng (o'ng chekka), yuqori (konteyner chetidan yuqori chekka) va pastki (pastki chekka). Ushbu xususiyatlarning qiymatlari piksel, em yoki foizda ko'rsatilgan. To'rt tomon uchun qiymatlarni ko'rsatishingiz shart emas. Odatda, faqat ikkita qiymat o'rnatiladi - yuqoridan yuqori chegara va chapdan chap tomon.
SALOM DUNYO
Bu erda mutlaqo joylashtirilgan div ko'rish chegarasining chap tomonida 100 piksel va pastki qismida 50 piksel bo'ladi.
Ushbu divdan keyin boshqa elementlar mavjudligi juda muhim emas. Ushbu div blok baribir brauzerning ko'rish oynasi chegaralariga nisbatan joylashtiriladi.
Agar mutlaq joylashishga ega bo'lgan element boshqa konteynerda joylashgan bo'lsa, unda o'z navbatida pozitsiya xususiyati qiymati statikka teng bo'lmasa, u holda element konteyner chegaralariga nisbatan joylashadi:
Nisbatan joylashishni aniqlash
Nisbiy joylashishni aniqlash nisbiy qiymat yordamida ham belgilanadi. Xuddi shu yuqori, chap, o'ng, pastki xususiyatlar element siljigan joyni ko'rsatish uchun qo'llaniladi:
Z-indeks xususiyati
Odatiy bo'lib, ikkita chegara elementlari mos kelganda, html formatida oxirgi marta aniqlangan element ikkinchisining ustiga chiqadi. Biroq, z-indeks xususiyati elementlarning ustma-ust tushish tartibini o'zgartirishga imkon beradi. Xususiyat raqamni o'z qiymati sifatida qabul qiladi. Z indeksining qiymati yuqoriroq elementlar pastki z indeksiga ega elementlarning ustiga chiqadi.
Masalan:
Endi redBlock uslubiga yangi qoida qo'shaylik:
RedBlock (z-indeks: 100; pozitsiya: mutlaq; tepa: 20px; chapda: 50px; kenglik: 80px; balandlik: 80px; fon-rang: qizil;)
Bu erda z-indeks 100. Ammo u 100 bo'lishi shart emas. Ikkinchi blokning z-indekslari aniqlanmagan va aslida nol bo'lganligi sababli, biz z-index xossasini redBlock uchun noldan katta har qanday qiymatga qo'yishimiz mumkin.
Va endi birinchi blok ikkinchisiga qo'shiladi va aksincha emas, xuddi boshida bo'lgani kabi.
Tasavvur qiling, veb-ishlab chiquvchi vizual ravishda tugagan sahifa qanday ko'rinishini o'ylashi shart emas. U shunchaki kodni yozadi, elementlarning o'zi sahifada yuqoridan pastga (blok) va chapdan o'ngga (satrda) qatorga to'g'ri keladi. Hujjatda kod qanchalik baland yozilgan bo'lsa, u shunchaki sahifada ko'rsatiladi.
Asosan, biz elementlarning tabiiy xatti-harakatlarini va ularning ko'rsatilish tartibini sahifada - hujjat oqimi orqali ko'ramiz. Ammo biz bu tartibdan umuman qoniqmayapmiz, biz logotipni yuqori chap burchakka, tugmachani esa biroz o'ngga joylashtirmoqchimiz. Biz barcha elementlar ustidan to'liq nazoratga muhtojmiz, qaerda va qaerda joylashgan bo'lishini hal qilamiz. Va buning uchun oqimdagi elementlarning odatiy xatti-harakatlarini o'zgartiradigan vosita (xususiyat) kerak. Bu qanday mulk?
IN CSS uslublar bu joylashishni aniqlash deb ataladi (lavozim)oddiy bo'lishi mumkin (statik), nisbiy (nisbiy) va mutlaq (mutlaq).
CSS-da nisbiy joylashish
Qachon nisbiy joylashishni aniqlash, blok asl holatiga nisbatan harakat qiladi. Biroq, blokga yozish orqali:
Lavozimi: nisbiy;
hech narsa bo'lmaydi, u joyida qoladi. Va koordinata tizimi blokni harakatga keltiradi (yuqori, pastki, chap, o'ng), ijobiy va salbiy qadriyatlar bilan.
U qanday ishlaydi?
Sinf bilan sariq blok ichida blok-sariq sinf bilan qizil blok mavjud blok-nisbiy... Oddiy oqimda qizil blok sariq rang bilan qoplanadi, chunki bu kodda yozilgan oxirgi narsa.
Biz qizil qutini 10 piksel pastga siljitishimiz kerak. Buni faqat qizil blok holatini majburan o'zgartirish orqali amalga oshirish mumkin. Biz shunday yozamiz yuqori: 10px, lekin ushbu 10 pikselni qaysi sondan ko'rsatish kerak?
Ro'yxatdan o'tgan mavqei: nisbiy, biz uning hozirgi holatiga nisbatan nimani hisoblashimizni aniq ko'rsatamiz.
Blok-sariq (
orqa rang: # ffe70f;
}
Blok-nisbiy (
pozitsiya: nisbiy;
yuqori: 10px;
orqa rang: # ed5b77;
}
Rasmda biz qanday qilib qizil blok asl holatidan 10 piksel pastga pastga siljiganini ko'rishimiz mumkin.
Agar siz koddan olib tashlasangiz mavqei: nisbiyshunda blok joyida qoladi. Va o'rniga nisbiy, yozing mutlaq, keyin sukut bo'yicha ushbu 10 piksel brauzer oynasining chetidan sanaladi va natijada bizning blokimiz, aksincha, yuqoriga ko'tarilib, brauzerning pastki chetiga ko'tariladi. Va bu bizning rejalarimizning bir qismi emas edi.
CSS-da mutlaq joylashish
Rasm blokida mutlaqo joylashtirilgan, bu koordinatalar tizimi brauzer chetidan hisoblanib, faqat bitta so'zni almashtirganda, biz blok holatini o'zgartirdik.
Lavozimi: mutlaq;
Bir o'ziga xos xususiyati bor. Mutlaq joylashishni aniqlash inline elementlarga ham ta'sir qiladi. Agar ichki element o'rnatilgan bo'lsa pozitsiya: mutlaq, keyin u blok kabi harakat qiladi. Bu mulkka o'xshash - displey: blokirovka.
Hammasi emas, "nisbiy" ota-ona tarkibidagi "mutlaq" element kelib chiqishini o'zgartiradi va ota-onadan joylashishni boshlaydi.
mavqei: nisbiy
pozitsiya: mutlaq;
Sinf bilan bloklash blok-mutlaq ota-onaning ichida bo'lish blok-sariq.
Blok-sariq (
pozitsiya: nisbiy;
to'ldirish: 10 piksel;
orqa rang: # ffe70f;
}
Sariq blok bo'lgani uchun nisbiy joylashishni aniqlash, keyin qizil blok mutlaq joylashishni aniqlash, belgilangan piksellar bilan qizil rangga nisbatan siljiydi.
Blok-mutlaq (
pozitsiya: mutlaq;
pastki: 10px;
chap: 10px;
orqa rang: # ed5b77;
}
Ruxsat etilgan joylashishni aniqlash
Sahifani siljitish paytida blokirovka qiling pozitsiya: sobit, odatda navbarni joylashtirish uchun ishlatiladigan joyda qoladi.
z-indeks
"Mutlaq" bloklarning takrorlanadigan tartibini hal qiladi. Bizga qizil blok sariqning tepasida bo'lishi kerak, keyin biz ko'rsatamiz z-indeks: 2 qizil va uchun z-indeks: 1 sariq uchun.
Blok-qizil (
pozitsiya: nisbiy;
z-indeks: 2;
orqa rang: # ffe70f;
}
Blok-yello (
pozitsiya: mutlaq;
yuqori: 20px;
z-indeks: 1;
orqa rang: # ed5b77;
}
Ehtimol siz allaqachon bilganingizdek, jadvallar yordamida sayt tuzishingiz mumkin, bu holda sahifa kataklarga bo'linadi. Sayt sahifasi alohida elementlardan iborat bo'lganda, ushbu maqsadlar uchun bloklardan foydalanishingiz mumkin.
Ehtimol, men bir vaqtning o'zida ko'plab yangi boshlagan veb-ustalar uchun jiddiy muammo - bu veb-sahifadagi ma'lum bir joyda bloklarni joylashtirish vazifasi deb aytsam, ehtimol xato qilmayman.
Bloklarni joylashtirishdagi asosiy qiyinchiliklardan biri bu aynan shu bloklarning joylashishi (hizalanishi).
Qatlamlar haqida bir oz
O'ylaymanki, ko'pchiligingiz qatlam (qatlam) kabi tushunchani eshitgansiz. Va, qoida tariqasida, qatlam teg bilan ko'rsatilgan blokni anglatadi
HTML-da qatlamlar mavjud emas. Bu shunchaki metafora. Qatlamlarga kelsak, ular veb-sahifaning ma'lum bir joyiga joylashtirilishi mumkin bo'lgan ma'lum bir HTML konteynerini (elementini) anglatadi.
Ikkinchi noto'g'ri tushuncha, qatlamlarga faqat teg tomonidan ko'rsatilgan blokni kiritishdir
), ro'yxatlar (
- ) va boshqa elementlar.
- mutlaq
- statik
- nisbiy
- sobit
Va endi haqida oh.
Yuqorida aytib o'tilganidek, har qanday HTML elementi uchun joyni belgilashingiz mumkin. Buning uchun har doim tegdan foydalanishga hojat yo'q.
... Bundan tashqari, ushbu yorliqdan foydalanish sizni veb-sahifada biron bir pozitsiyani o'rnatishingizni majbur qilmaydi.
Teg bilan ko'rsatilgan blokdan foydalanish ma'nosi
kattalashtirishgacha qisqartiriladi. Axir uning ichiga boshqa elementlar (paragraflar, rasmlar va boshqalar) joylashtirilishi mumkin. Shunday qilib, har xil tarkibga ega bo'lgan katta blok olinadi, bu veb-sahifada elementlarning har biriga alohida joylashtirilganidan ancha osonroq joylashadi.
Elementlarning joylashuvi.
Joylashtirishning to'rtta asosiy turi mavjud:
1. Statik
2. Mutlaqo
3. Ruxsat etilgan
4. Nisbiy)
Statik
Birlamchi manzil sifatida ishlatiladi. Bunday holda, brauzer HTML kodini ko'rib chiqadi, uni elementlarga ajratadi va ulardan sahifa tuzadi. Bu bir qator elementlarning ketma-ketligi chiqadi. Ular html kodida ko'rsatilgan tartibda ko'rsatiladi.
Parametrlarni qo'llash chap, yuqori, o'ng va pastki hech qanday natija bermaydi.
Nisbiy joylashishni aniqlashda statik joylashishni biling.
Mutlaqo
Mutlaq joylashishni aniqlash blokning yuqori chap burchagining koordinatalarini belgilaydi. Bunday holda, koordinatalar asosiy element joylashgan joyga nisbatan hisoblanadi. Agar ota-ona brauzer oynasi bo'lsa, unda blok unga nisbatan hizalanadi. Agar blok ichida joylashgan yana bir element bo'lsa, u holda hizalama allaqachon ushbu elementga nisbatan.
Ruxsat etilgan
Nomidan allaqachon bu holda element aniqlanganligi aniq bo'ladi. U veb-sahifadagi ma'lum bir joyda joylashgan va hech qaerga harakat qilmaydi. Ushbu hizalama ko'pincha markazga o'rnatiladigan va sahifani aylantirganda harakatlanmaydigan pop-uplarga qo'llaniladi.
Nisbiy
Bunday joylashishni aniqlash qiyin bo'lishi mumkin. Uning nomi to'liq mos emas. Ko'p odamlar elementlarning nisbiy va mutlaq joylashishini chalkashtirib yuborishadi. Hizalama asosiy elementga nisbatan ko'rinishi mumkin. Va mutlaq joylashuv holatida - brauzer oynasiga nisbatan. Ammo bu unday emas.
Ushbu holatda elementning joylashishi uning statik holatdagi joyiga nisbatan sodir bo'lishini tushunish kerak. Bu yuqorida aytib o'tilgan.
Oddiy so'zlar bilan aytganda, siz brauzerga elementni sukut bo'yicha joylashgan joyidan ko'p pikselga ko'chirishni buyurasiz.
Yana bir qiyin nuqta bor. Agar asosiy element nisbiy joylashtirilgan bo'lsa va ichki element mutlaq bo'lsa nima bo'ladi? Bunday holda, asosiy elementga nisbatan koordinatalari, agar mavjud bo'lsa, uning o'rnini hisobga olgan holda, asosiy elementga nisbatan hisoblanadi.
Xulosa qiling.
Demak, mulk bor pozitsiya... Ushbu xususiyat 4 qiymatni olishi mumkin Statik, mutlaq, doimiy va nisbiy... Odatiy bo'lib ketadi Statik.
Element uchun koordinatalarni belgilaganingizda, brauzerga ushbu koordinatalarni qanday hisoblashi kerakligini aytishingiz kerak. Biz unga boshlang'ich nuqtani berishimiz kerak.
Shuni unutmangki, mulk yo'q bo'lganda pozitsiya koordinatalar hisobga olinmaydi, blok o'sha joyda, statik holatida qoladi.
Endi koordinatalar qanday o'rnatilishini ko'rib chiqamiz.
Ushbu maqsadlar uchun to'rt turdagi xususiyatlardan foydalaniladi:
1. Yuqoridan
2. Chap
3. To'g'ri
4. Pastki
Yuqori - ijobiy qiymat (masalan, 20px) blokni 20 piksel pastga siljitadi. Salbiy qiymat (-20px) elementni 20 piksel yuqoriga ko'taradi. Bularning barchasi yuqori chap burchakka nisbatan sodir bo'ladi.
Chapda - belgiga qarab chapga yoki o'ngga siljish. Yuqori chap burchakka nisbatan.
To'g'ri- qaysi belgiga qarab o'ngga va chapga ofset. Yuqori o'ng burchakka nisbatan.
Pastki - belgiga qarab yuqoriga yoki pastga siljish. Pastki chap burchakka nisbatan sodir bo'ladi.
Mana HTML kod:
Va bu CSS:
#1 {
pozitsiya: nisbiy;
yuqori: 100px;
chap: 100 piksel;
kengligi: 500 piksel;
balandligi: 500 piksel;
background-color: #CCCCCC;
}
#11 {
orqa rang: # 003399;
pozitsiya: mutlaq;
pastki: -30px;
o'ngda: -50px;
kengligi: 100 piksel;
balandligi: 100 piksel;
}
#2 {
orqa rang: # 990066;
kengligi: 200 piksel;
balandligi: 300 piksel
}
Amaliyot.
Yozish paytida va buni o'zim angladim.
CSS bloklarini joylashtirish maketning eng muhim bosqichlaridan biri, chunki aynan shu narsa saytning moslashuvchanligiga yoki kelajakda uni amalga oshirish imkoniyatiga ta'sir qiladi (agar hozirda bu talab qilinmasa), shuningdek saytni yanada kengaytirishga katta ta'sir ko'rsatadi. "Baxtsiz maket dizaynerlari" bunday maketni yasashlari odatiy hol emaski, oxir-oqibat biror narsani o'zgartirgandan ko'ra uni tashlash osonroq bo'ladi, lekin shu bilan birga u maketga to'liq mos kelishi mumkin. Bunday holat bu yoki boshqa turdagi joylashishni aniqlashni qaerda va qachon ishlatishni tushunmaslikdan kelib chiqadi. Bugun biz ushbu masalani tushunishga harakat qilamiz. Va shunday qilib, CSS-da xususiyat mavjud pozitsiya. Ushbu xususiyat 5 qiymatni olishi mumkin, ammo biz 4 ta asosiy narsani ko'rib chiqamiz:
Bloklarning mutlaq joylashishi (mutlaq)
Bizning ro'yxatimizdagi birinchi o'rinni aniqlashning mutlaq usuli. Ushbu xususiyat tayinlanganda, blok o'z-o'zidan birlikka aylanadi va sahifaning qolgan elementlari uning joylashuviga ta'sir qilmaydi, shuningdek boshqa elementlarga ta'sir qilmaydi. Blokning kattaligi kenglik va balandlik xususiyatlari bilan, sahifadagi holat esa yuqori xususiyatlar bilan belgilanadi. chap, o'ng va pastki qismlarda ushbu parametrlar yuqori, chap, o'ng va pastki qirralarning chekkalarini o'rnatadi. Agar blokda asosiy element mavjud bo'lmasa, shuningdek, asosiy elementning joylashuvi statikdan farq qiladigan bo'lsa, u holda yuqori, chap, pastki, o'ng xususiyatlar indentlarni sahifaning boshidan, aks holda asosiy elementning chekkalaridan o'rnatadi.
Ko'pincha, ushbu turdagi joylashishni aniqlash blokni o'ng yoki pastki chetga bosish kerak bo'lganda ishlatiladi. Keling, bunday tartibni ko'rib chiqaylik.
Qulaylik uchun bloklar ko'p rangli ramka bilan ta'kidlangan. Belgilanish quyidagicha ko'rinadi:
XHTML
Aloqalar (pozitsiya: nisbiy;) .sariq (pozitsiya: mutlaq; o'ng: 10px; pastki: 10px;)
Aloqalar
pozitsiya: nisbiy;
Sariq
pozitsiya: mutlaq;
o'ng: 10px;
pastki: 10px;
Ushbu misolda biz o'ng va pastki qirralardan ofsetni o'rnatish uchun o'ng va pastki xususiyatlardan foydalanganmiz. Ushbu xususiyat qiymatlari tepaga teng: Element balandligi - 10px va chapda: Element kengligi - 10px.
Shuningdek, absolyut joylashishni aniqlash, ba'zida bir elementning boshqasiga "o'tib ketishi" kerak bo'lganda ishlatiladi.
Statik joylashishni aniqlash
Har bir sahifada uchraydigan va odatda ko'pchilik elementlar uchun o'rnatiladigan joylashishni aniqlashning eng keng tarqalgan turi statik, CSS-da statik deb yozilgan. Ko'pgina HTML teglari uchun bu qiymat standart hisoblanadi, ya'ni. agar pozitsiya aniq belgilanmagan bo'lsa, unda qiymat statik bo'ladi. Ushbu tartib bilan elementlar bir-birining ustiga bir-birining ustiga tizilib turadi va har bir element oynasidagi koordinatalar pozitsiyasi: statik yoki holati: nisbiy bo'lgan eng yaqin elementlarga bog'liq. Ushbu joylashuv bilan yuqori, chap, o'ng, pastki xususiyatlar ishlamaydi, margin xususiyati tufayli pozitsiya o'zgartiriladi.
Nisbatan joylashishni aniqlash
Bunday joylashish statik joylashishga juda o'xshaydi, faqat elementning holatini yuqori, chap, o'ng, pastki va chekka xususiyatlar bilan o'zgartirish mumkin.
Ruxsat etilgan joylashishni aniqlash
Koordinatalarni belgilashning o'ziga xos xususiyatlariga ko'ra aniq joylashish mutlaqga o'xshashdir, ammo bu pozitsiya HTML sahifasiga nisbatan emas, balki brauzer oynasiga nisbatan hisoblanadi, ya'ni. top: 10px bilan, siz yuqori to'ldirishni 10px ga o'rnatasiz BROWSER WINDOW-danva siz aylantirishning qaysi darajasida bo'lishingizdan qat'i nazar, ushbu element har doim ekraningiz bilan kuzatiladi.
Odatda navigatsiya elementlari uchun foydalaniladi, shuning uchun foydalanuvchi doimo muhim ma'lumotlarni yoki qiziqarli sahifalarga havolalarni ko'rishi kerak.
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Joylashtirish - bu bloklarni joylashtirishdagi asosiy tushunchalardan biridir. U bilan shug'ullanib, siz ko'p narsani tushunasiz va shamanizmdan maket mazmunli jarayonga aylanadi. Shunday qilib, maqola ...
Yuqorida aytib o'tilganidek, har qanday HTML elementi uchun joyni belgilashingiz mumkin. Buning uchun har doim tegdan foydalanishga hojat yo'q.
Teg bilan ko'rsatilgan blokdan foydalanish ma'nosi Joylashtirishning to'rtta asosiy turi mavjud: 1. Statik Birlamchi manzil sifatida ishlatiladi. Bunday holda, brauzer HTML kodini ko'rib chiqadi, uni elementlarga ajratadi va ulardan sahifa tuzadi. Bu bir qator elementlarning ketma-ketligi chiqadi. Ular html kodida ko'rsatilgan tartibda ko'rsatiladi. Parametrlarni qo'llash chap, yuqori, o'ng va pastki hech qanday natija bermaydi. Nisbiy joylashishni aniqlashda statik joylashishni biling. Mutlaq joylashishni aniqlash blokning yuqori chap burchagining koordinatalarini belgilaydi. Bunday holda, koordinatalar asosiy element joylashgan joyga nisbatan hisoblanadi. Agar ota-ona brauzer oynasi bo'lsa, unda blok unga nisbatan hizalanadi. Agar blok ichida joylashgan yana bir element bo'lsa, u holda hizalama allaqachon ushbu elementga nisbatan. Nomidan allaqachon bu holda element aniqlanganligi aniq bo'ladi. U veb-sahifadagi ma'lum bir joyda joylashgan va hech qaerga harakat qilmaydi. Ushbu hizalama ko'pincha markazga o'rnatiladigan va sahifani aylantirganda harakatlanmaydigan pop-uplarga qo'llaniladi. Bunday joylashishni aniqlash qiyin bo'lishi mumkin. Uning nomi to'liq mos emas. Ko'p odamlar elementlarning nisbiy va mutlaq joylashishini chalkashtirib yuborishadi. Hizalama asosiy elementga nisbatan ko'rinishi mumkin. Va mutlaq joylashuv holatida - brauzer oynasiga nisbatan. Ammo bu unday emas. Ushbu holatda elementning joylashishi uning statik holatdagi joyiga nisbatan sodir bo'lishini tushunish kerak. Bu yuqorida aytib o'tilgan. Oddiy so'zlar bilan aytganda, siz brauzerga elementni sukut bo'yicha joylashgan joyidan ko'p pikselga ko'chirishni buyurasiz. Yana bir qiyin nuqta bor. Agar asosiy element nisbiy joylashtirilgan bo'lsa va ichki element mutlaq bo'lsa nima bo'ladi? Bunday holda, asosiy elementga nisbatan koordinatalari, agar mavjud bo'lsa, uning o'rnini hisobga olgan holda, asosiy elementga nisbatan hisoblanadi. Demak, mulk bor pozitsiya... Ushbu xususiyat 4 qiymatni olishi mumkin Statik, mutlaq, doimiy va nisbiy... Odatiy bo'lib ketadi Statik. Element uchun koordinatalarni belgilaganingizda, brauzerga ushbu koordinatalarni qanday hisoblashi kerakligini aytishingiz kerak. Biz unga boshlang'ich nuqtani berishimiz kerak. Shuni unutmangki, mulk yo'q bo'lganda pozitsiya koordinatalar hisobga olinmaydi, blok o'sha joyda, statik holatida qoladi. Ushbu maqsadlar uchun to'rt turdagi xususiyatlardan foydalaniladi: 1. Yuqoridan Yuqori - ijobiy qiymat (masalan, 20px) blokni 20 piksel pastga siljitadi. Salbiy qiymat (-20px) elementni 20 piksel yuqoriga ko'taradi. Bularning barchasi yuqori chap burchakka nisbatan sodir bo'ladi. Chapda - belgiga qarab chapga yoki o'ngga siljish. Yuqori chap burchakka nisbatan. To'g'ri- qaysi belgiga qarab o'ngga va chapga ofset. Yuqori o'ng burchakka nisbatan. Pastki - belgiga qarab yuqoriga yoki pastga siljish. Pastki chap burchakka nisbatan sodir bo'ladi. Mana HTML kod: Va bu CSS: #1 { #11 { #2 { Amaliyot. Yozish paytida va buni o'zim angladim. CSS bloklarini joylashtirish maketning eng muhim bosqichlaridan biri, chunki aynan shu narsa saytning moslashuvchanligiga yoki kelajakda uni amalga oshirish imkoniyatiga ta'sir qiladi (agar hozirda bu talab qilinmasa), shuningdek saytni yanada kengaytirishga katta ta'sir ko'rsatadi. "Baxtsiz maket dizaynerlari" bunday maketni yasashlari odatiy hol emaski, oxir-oqibat biror narsani o'zgartirgandan ko'ra uni tashlash osonroq bo'ladi, lekin shu bilan birga u maketga to'liq mos kelishi mumkin. Bunday holat bu yoki boshqa turdagi joylashishni aniqlashni qaerda va qachon ishlatishni tushunmaslikdan kelib chiqadi. Bugun biz ushbu masalani tushunishga harakat qilamiz. Va shunday qilib, CSS-da xususiyat mavjud pozitsiya. Ushbu xususiyat 5 qiymatni olishi mumkin, ammo biz 4 ta asosiy narsani ko'rib chiqamiz: Bizning ro'yxatimizdagi birinchi o'rinni aniqlashning mutlaq usuli. Ushbu xususiyat tayinlanganda, blok o'z-o'zidan birlikka aylanadi va sahifaning qolgan elementlari uning joylashuviga ta'sir qilmaydi, shuningdek boshqa elementlarga ta'sir qilmaydi. Blokning kattaligi kenglik va balandlik xususiyatlari bilan, sahifadagi holat esa yuqori xususiyatlar bilan belgilanadi. chap, o'ng va pastki qismlarda ushbu parametrlar yuqori, chap, o'ng va pastki qirralarning chekkalarini o'rnatadi. Agar blokda asosiy element mavjud bo'lmasa, shuningdek, asosiy elementning joylashuvi statikdan farq qiladigan bo'lsa, u holda yuqori, chap, pastki, o'ng xususiyatlar indentlarni sahifaning boshidan, aks holda asosiy elementning chekkalaridan o'rnatadi. Ko'pincha, ushbu turdagi joylashishni aniqlash blokni o'ng yoki pastki chetga bosish kerak bo'lganda ishlatiladi. Keling, bunday tartibni ko'rib chiqaylik. Qulaylik uchun bloklar ko'p rangli ramka bilan ta'kidlangan. Belgilanish quyidagicha ko'rinadi: XHTML Aloqalar (pozitsiya: nisbiy;) .sariq (pozitsiya: mutlaq; o'ng: 10px; pastki: 10px;) Aloqalar pozitsiya: nisbiy; Sariq pozitsiya: mutlaq; o'ng: 10px; pastki: 10px; Ushbu misolda biz o'ng va pastki qirralardan ofsetni o'rnatish uchun o'ng va pastki xususiyatlardan foydalanganmiz. Ushbu xususiyat qiymatlari tepaga teng: Element balandligi - 10px va chapda: Element kengligi - 10px. Shuningdek, absolyut joylashishni aniqlash, ba'zida bir elementning boshqasiga "o'tib ketishi" kerak bo'lganda ishlatiladi. Har bir sahifada uchraydigan va odatda ko'pchilik elementlar uchun o'rnatiladigan joylashishni aniqlashning eng keng tarqalgan turi statik, CSS-da statik deb yozilgan. Ko'pgina HTML teglari uchun bu qiymat standart hisoblanadi, ya'ni. agar pozitsiya aniq belgilanmagan bo'lsa, unda qiymat statik bo'ladi. Ushbu tartib bilan elementlar bir-birining ustiga bir-birining ustiga tizilib turadi va har bir element oynasidagi koordinatalar pozitsiyasi: statik yoki holati: nisbiy bo'lgan eng yaqin elementlarga bog'liq. Ushbu joylashuv bilan yuqori, chap, o'ng, pastki xususiyatlar ishlamaydi, margin xususiyati tufayli pozitsiya o'zgartiriladi. Bunday joylashish statik joylashishga juda o'xshaydi, faqat elementning holatini yuqori, chap, o'ng, pastki va chekka xususiyatlar bilan o'zgartirish mumkin. Koordinatalarni belgilashning o'ziga xos xususiyatlariga ko'ra aniq joylashish mutlaqga o'xshashdir, ammo bu pozitsiya HTML sahifasiga nisbatan emas, balki brauzer oynasiga nisbatan hisoblanadi, ya'ni. top: 10px bilan, siz yuqori to'ldirishni 10px ga o'rnatasiz BROWSER WINDOW-danva siz aylantirishning qaysi darajasida bo'lishingizdan qat'i nazar, ushbu element har doim ekraningiz bilan kuzatiladi. Odatda navigatsiya elementlari uchun foydalaniladi, shuning uchun foydalanuvchi doimo muhim ma'lumotlarni yoki qiziqarli sahifalarga havolalarni ko'rishi kerak.Elementlarning joylashuvi.
2. Mutlaqo
3. Ruxsat etilgan
4. Nisbiy)Statik
Mutlaqo
Ruxsat etilgan
Nisbiy
Xulosa qiling.
Endi koordinatalar qanday o'rnatilishini ko'rib chiqamiz.
2. Chap
3. To'g'ri
4. Pastki
pozitsiya: nisbiy;
yuqori: 100px;
chap: 100 piksel;
kengligi: 500 piksel;
balandligi: 500 piksel;
background-color: #CCCCCC;
}
orqa rang: # 003399;
pozitsiya: mutlaq;
pastki: -30px;
o'ngda: -50px;
kengligi: 100 piksel;
balandligi: 100 piksel;
}
orqa rang: # 990066;
kengligi: 200 piksel;
balandligi: 300 piksel
}Bloklarning mutlaq joylashishi (mutlaq)
Statik joylashishni aniqlash
Nisbatan joylashishni aniqlash
Ruxsat etilgan joylashishni aniqlash
