Position relative - bu nima? Batafsil tushuntirish

HTML formati - bu juda uzoq jarayon, diqqatli, ammo juda ijodiy. IT-sohasida ishlaydigan ko'pchilik odamlar uchun veb-sahifalarning joylashuvi zerikarli tartibga o'xshab qolishi mumkinligiga qaramasdan, bunday narsa uchun kasb egasi bo'lgan mutaxassislar nafaqat vazifalarni sifatli bajarish bilan, balki jarayonning o'zi ham sezilarli zavq olishadi.

Ammo, tajribali veb-dizayner bo'lishdan oldin, har bir yangi boshlovchi ko'p vaqtni HTML tili va uning ittifoqdoshi CSS uchun turli yo'riqnomalar va spetsifikatsiyalarni o'rganadi. CSS- ning nima ekanligi, nima uchun va nima uchun "quloqlari bilan fe'l" sizni turishingiz va mashhur xususiyatlaridan biri haqida - Position Relative - bugun gaplashamiz.

CSS nima?

CSS qisqartmasi rus tiliga «kaskad uslublar jadvallari» deb tarjima qilinadi. Bu juda g'alati ko'rinadi - bir tomondan, so'zlar kabi tushunarli, biroq ikkinchisida - umumiy ma'no bir vaqtning o'zida qo'lga olinmaydi. Oddiy bilan boshlaymiz - uslublar bilan. Ushbu texnologiya siz sahifaga faqatgina bir marta ko'rsatilishi mumkin bo'lgan, ammo cheksiz ko'p marta ishlatiladigan tashqi ko'rinishga taalluqli xususiyatlarni taqdim etish imkonini beradi.

Rasmiy tarjimada "jadval" so'zi deyarli tasodifan bo'lib chiqdi, aslida "varaqlar" yoki "ro'yxatlar" so'zlarini ishlatish yanada o'rinli bo'lar edi, lekin asl tarjimaning mualliflari CSS-ning ro'yxatga qaraganda ko'proq o'xshab ketishini va biz kimmiz Ana shunda endi ular hukm qilinadi.

Nihoyat, "kaskad" so'zi. Aslida, har bir element bir vaqtning o'zida bir nechta uslubga ega bo'lishi mumkin, bu aralashtirilishi yoki hatto kesishishi mumkin. Bunday hollarda, brauzer bir nechta uslubga ega bo'lgan blokning ko'rinishini to'g'ri tuzish uchun bir nechta qoidalarni qo'llashi kerak, masalan, ulardan biri bilan Position Relative, ikkinchisi - Position Absolute xususiyatiga ega. Aslida bunday to'qnashuvlarga toqat qila olmaydi, ammo yirik loyihalarda bunday tartibsizlik juda tez-tez uchraydi.

Demak, endi bu ism aniq, oddiy misolni ko'rib chiqaylik. Sizning veb-saytingizda muayyan tarzda ishlab chiqarilgan ko'plab tugmalar mavjud. Ular hajmi, soya, shaffoflik, rang kabi xususiyatlarga ega. Albatta, bu parametrlarni har bir tugmani yaratishingiz mumkin, lekin CSS-dan foydalanish ancha oson bo'ladi. Amalda siz yuqorida ko'rsatilgan barcha qiymatlar qiymatlari ro'yxatlanadigan sinfni tavsiflashingiz kerak va keyinchalik uzoq ro'yxatga olish o'rniga har bir tugmachaning yorlig'i faqat ushbu sinf nomini ko'rsatishi kerak, shundan so'ng brauzer bu elementlarni kerakli ranglarga bo'yab, ularga mos ranglarni beradi "Yorqin".

Position xususiyati nima uchun kerak?

Keling, to'g'ridan-to'g'ri Lavozimga ko'chib o'taylik, u uchun barcha maqola ishlab chiqilgan. Agar siz ingliz tilini yaxshi bilsangiz yoki yaxshi sezgi mavjud bo'lsa, unda siz allaqachon tushunishingiz kerak - bu xususiyat elementning joylashuvi uchun javobgardir. Aslida, bu ma'lum joyni belgilashning o'rniga brauzerga qo'shni yoki butun sahifaga aniq bir narsani qanday joylashtirishini aytadi.

Position xususiyati qanday qadriyatlarga ega bo'lishi mumkin?

Mulkimiz bir nechta qiymatga ega bo'lishi mumkin, ulardan faqat bittasi bor. Bu erda har birining qisqacha ta'rifi:

• Lavozimni egallash. Bu xususiyat siz ota-onangiz maqola qo'yilgan manzil ma'lumotlarini nusxalash imkonini beradi. Misol uchun, agar sizda ko'rsatilgan Position Relative bilan div mavjud bo'lsa, u holda imzo qo'yilgan imgani devralma qiymati ham Nisbiy qiymatini oladi.
• Oddiy manzil. Ushbu qiymat boshqacha ko'rsatilmagan bo'lsa, avtomatik ravishda barcha elementlarga beriladi. Elementlar kodda aytib o'tilganidek, bu pozitsiyaga mos keladi va o'zlarining pozitsiyasini o'zgartirishga imkon beradigan turli "taomlar" uchun mavjud emas.
• Absolute pozitsiyasi. Position xususiyati bu qiymat ko'pincha "suzuvchi" elementni yaratish zarur bo'lgan holatlarda ishlatiladi. Ushbu mulkiy qiymatga ega bo'lgan element, qolgan sahifalar uchun "ko'rinmas" qoladi. Ya'ni, ular bizning mutlaq elementimiz yo'qligida joylashgan. Sahifa qanchalik qaytib ketganiga qaramasdan u o'zi hamisha qoladi.
• Pozisyon barqaror. Ko'p jihatdan, bu qiymat avvalgi holatga o'xshash, ammo mutlaq element ota-ona bilan bog'langan bo'lsa, faqatgina brauzer ekranining yuqori chap burchagining koordinatalarini foydalanadi, bundan oldin boshqa elementlarga e'tibor bermaydi.
• Nihoyat, Position relative. Ushbu turdagi qiymat elementni boshqalarga nisbatan joylashtirish imkonini beradi, bu oddiy odamlarda "kauchuk" deb ataladigan moslashtirilgan belgini yaratishda foydali bo'lishi mumkin. Ushbu xususiyatga ega bo'lgan element, sahifadagi joylashuvini o'zgartirish qobiliyatini yo'qotmasdan qolgan qismini "harakatga keltiradi".

Turli xil brauzerlarda Position bilan ishlash xususiyatlari

Barcha brauzerlar teng darajada mos emas. Internetning seysmik harakatlarsiz ko'pgina muqobil dasturlari Position qiymatini idrok qilsa-da, Internet Explorer ushbu versiyasiga qarab, "surunkali ravishda maxsus" hisoblanadi.

Misol uchun, allaqachon ko'milgan IE6 brauzeridan foydalangan holda, Ruxsat etilgan va Inherit qiymatlaridan foydalana olmaysiz - eshak ularni faqatgina e'tiborsiz qoldiradi. Biroq, ettinchi versiyadan boshlab vaziyat o'zgarib ketganiga qaramasdan, Fixed-da qayta ishlanmoqda, chunki har bir inson "brauzerni boshqa brauzerlarni yuklab olish uchun" sakkizinchi shaklda egallagan.

Tadqiqotchilarning qolganlari, 90-yillarning o'rtalarida chop etilgan 4 xilma-xillikdagi ushbu mulkni qo'llab-quvvatlaydigan Opera tashqari, birinchi versiyalardan Positionni jimgina boshqaradi.

Javascript da Position bilan ishlash

Aslida, Javascriptdagi Position mulki bilan qanday ishlash kerakligi haqidagi hikoyani biz faqatgina mulkiy huquqlar uchun kiritdik. Ushbu xususiyatning nomdagi maxsus belgilarga ega bo'lmaganligi uchun, JS-ni hech qanday o'zgarishsiz ishlatishingiz mumkin, masalan, Position Relative div ni o'rnatish uchun siz bu qatorni qo'shishingiz kerak: div.style.position = 'relative'.

Ko'rib turganingizdek, hamma narsa juda oddiy.

Nima uchun Lavozimga alohida e'tibor berilishi kerak?

Position xususiyati qiymatlarining aksariyat qismini yumshoq qilib qo'yish, atrofdagi elementlarga "tupurish", "stil pozitsiyasi: nisbiy" qiymatidan foydalanib, butun sahifani butunlay eslab qolishga to'g'ri keladi, chunki uning noto'g'ri ishlatilishi ekranning butun tarkibini juda "buzishi" mumkin .

Bunga qo'shimcha ravishda, faqat ushbu xususiyat osongina aniq dizaynni moslashuvchan dasturga aylantirish imkonini beradi, chunki uning ilovasi sahifaning barcha mazmunini avtomatik ravishda ta'sir qiladi. Keyinchalik, biz ushbu qiymatdan foydalanishning misollari va xatolarini ko'rib chiqishga vaqt topa olamiz va uning amaliy qiymatini amalda ko'rishingiz mumkin.

Nisbatan joylashishni aniqlashni qachon ishlatishim kerak?

An'anaviy HTML-sahifalar tartibiga qo'shimcha ravishda, Position Relative ko'pincha turli qiziqarli effektlarni yaratish uchun ishlatiladi. Misol uchun, agar siz elementni biror sahifaga "kelishi" yoki aksincha, uning qirralariga osonlikcha o'tishini istasangiz, bu xususiyat sizga ushbu "feint" ni qo'llashga yordam beradi.

Shu kabi "fokuslar" Javascript orqali amalga oshiriladi, yoki siz progressiv tartibga intilishingiz uchun CSS3 funktsiyalari orqali o'zgaruvchan qiymatdagi tsiklik o'zgarishni sozlash imkonini beradi.

Bundan tashqari, ayrim hollarda, "gibrid" pozitsion nisbiy qiymatlarni yaratish mumkin. CSS bir vaqtning o'zida bir pozitsiya o'rnini belgilashga imkon bermasa-da: mutlaq qarindoshi, biroq ba'zi fokuslar yordamida siz hali ham bu ta'sirga erisha olasiz. Bunday yondashuv murakkab asboblar paneli yoki kontekst menyusiga o'xshash biror narsa yaratish kerak bo'lgan holatlarda foydali bo'lishi mumkin. Ushbu misollarni ko'rib chiqaylik, albatta, bunday "gibrid" ning tuzilishini tasvirlaymiz.

Nisbiy joylashishni aniqlashning misollar

Position Relative - siz juda ko'p qiziqarli effektlarni amalga oshirishga imkon beradigan juda oddiy, ammo moslashuvchan vosita. Yaroqsiz shablon kodlarini yozib qo'yish vaqtini va bo'sh joyni sarflamaslik uchun, sizning saytingizni yoki shaxsiy sahifalarini bezatib beradigan ba'zi og'zaki algoritmalarni beramiz.

"Chiqish" liniyasidan boshlaylik. Ekranning chap burchagidan orqasiga "sayohat" qiladigan elementni kerakli deb o'ylasangiz va asta-sekin o'ng tomonga o'ting. Bunday "mexanizm" ni amalga oshirish uchun siz quyidagi manzilni belgilashingiz kerak: nisbiy; Chapdan: -100px, bu erda -100 - blokning kengligini tashkil etadigan taxminiy sonli piksel. Ushbu uslub blokni ekranning tashqarisida "boshlanish pozitsiyasiga" sozlash imkonini beradi. Endi chap funktsiyaning qiymatini bir necha millisekundlarda, brauzer darchasining kengligi va elementning kengligidan kam bo'lgunga qadar oshiradigan skriptdan foydalanishingiz mumkin. Natijada, chap tomonning ortidan ko'rinadigan, butun ekran bo'ylab o'ralgan va o'ng tomonida "parklangan" blokni olamiz.

Yana bir misol sizga "nisbatan-mutlaq" elementlarni yaratishga imkon beradi. Misol uchun, bir Lavozimga ega bo'lgan boshqasiga mutlaqo kira olasiz. Natijada, bizda "nisbiy" blok mavjud, unda mutlaq belgisi mavjud bo'lgan o'lchamga ega bo'lmagan va uni oldingi elementlarga bog'liq bo'lgan holatda o'zini ko'rsatishga qodir.

Obyektning nisbiyni ishlatishda umumiy xatolar

Position Relative'dan foydalanishda eng ko'p uchraydigan xatolik, ko'plab tartibni yaratuvchilari har qanday joyda bo'lishi mumkin bo'lgan blok uchun joy ajratish qobiliyatini unutish. Masalan, ekranning tashqarisida joylashgan va nisbatan joylashuvga ega bo'lgan juda katta bo'lsa, uning o'rnida "teshik" paydo bo'ladi. Shu bilan birga, ba'zida muayyan noqulayliklar yaratib beradigan ushbu xususiyat, masalan, barcha bloklari asta-sekin yuqori pozitsiyaga joylashtirilgan "o'z-o'zini yig'ish" saytining qiziqarli ta'siri uchun foydalanish mumkin: 0; Chapdan: 0; Ya'ni, aslida.