Uslublar jadvallarini kaskadli shaklda joylashtirish
Veb-sahifa joylashuvi uchun CSS pozitsiyasini ishlatishda muammolardan biri sizning ba'zi elementlaringizning boshqalar bilan o'xshash bo'lishi mumkinligi. Agar HTMLda so'nggi elementni yuqorida bo'lishini xohlasangiz, u yaxshi ishlaydi, ammo agar siz yoki yo'q bo'lsa, nima qilsangiz, yoki hozirda buni boshqalarga o'xshamaydigan elementlarga ega bo'lishni istasangiz nima bo'ladi, chunki dizayn bu "qatlamli" ko'rinishga ? Elementlar ketma-ketligini o'zgartirish uchun siz CSS xususiyatidan foydalanishingiz kerak.
Agar siz Word va PowerPoint-da grafik vositalaridan foydalangan bo'lsangiz yoki Adobe Photoshop kabi mustahkamroq tasvir muharriri bo'lsangiz, unda z-indeks kabi ishlarni ko'rdingiz. Ushbu dasturlarda siz jalb qilgan ob'ektni belgilashingiz va hujjatning ba'zi qismlarini "Orqaga jo'natish" yoki "Oldinga keltiring" variantini tanlang. Fotoshopda sizda bunday funktsiyalar mavjud emas, lekin dasturning "Layer" panosiga egasiz va siz ushbu qavatni qayta tartibga solish orqali tuvalga qo'yilgan elementni qaerga qo'yishni belgilashingiz mumkin. Ushbu ikkala misolda, asosan, ushbu ob'ektlarning z-indeksini o'rnatasiz.
Z-indeks nima?
Sahifadagi elementlarni joylashtirish uchun CSS joylashuvini ishlatganda, siz uch o'lchamda o'ylashingiz kerak. Ikki standart o'lcham bor: chap / o'ng va yuqori / pastki. Chapdan o'ngga indeks x-indeks sifatida ma'lum, yuqoridan pastga - y indeksidir. Bu ikki indeks yordamida elementlarni gorizontal yoki vertikal ravishda joylashtirasiz.
Veb-dizaynga kelganda, sahifaning istifleme tartibi ham bor. Sahifadagi har bir element boshqa biron bir elementning ustiga yoki ostiga qatlam bo'lishi mumkin. Z-index xususiyati har bir elementning qaerda joylashganligini aniqlaydi. Agar x-indeks va y-indekslari gorizontal va vertikal yo'nalish bo'lsa, z-index - sahifaning chuqurligi, asosan, uchinchi o'lchovdir.
Men veb-sahifadagi elementlarni qog'oz parchalari va veb-sahifaning o'zi kollaj sifatida o'ylashni yaxshi ko'raman. Qaerda qog'ozni joylashtirsam joylashishni aniqlash bilan belgilanadi va boshqa elementlar bilan qoplangan qancha z-indeksi.
Z-indeksi - ijobiy (masalan, 100) yoki salbiy (masalan -100). Standart z-indeksi 0 ga teng. Z-indeksi yuqori bo'lgan element yuqorisida, keyinchalik eng yuqori z-indeksiga to'g'ri keladi. Agar ikkita element bir xil z-indeks qiymatiga ega bo'lsa (yoki u aniqlanmagan, ya'ni asl qiymati 0dan foydalanishni nazarda tutadigan bo'lsa), brauzer HTML-da paydo bo'ladigan tartibda ularni qatlamlaydi.
Z-indeksini qanday ishlatish kerak
O'zingiz xohlagan har bir elementni o'zingizning z-index qiymatidan boshqasiga bering. Misol uchun, agar menda beshta element mavjud bo'lsa:
- element 1 - z-indeksi -25
- element 2 - z-indeksi 82
- element 3 - z-indeks belgilanmagan
- element 4 - z-indeks 10
- element 5 - z-indeks -3
Ular quyidagi tartibda yig'iladi:
- element 2
- element 4
- element 3
- element 5
- element 1
Elementlaringizni yig'ish uchun juda ko'p turli z-index qiymatlarini ishlatishni tavsiya qilaman. Shunday qilib, siz sahifaga ko'proq elementlar qo'shsangiz, siz boshqa barcha elementlarning z-indeks qiymatlarini moslashtirmasdan, ularni qavatlash uchun joyingiz bor. Masalan:
- 100 ta eng katta elementim uchun
- 0 mening o'rta elementim uchun
- Pastki element uchun -100
Siz ikkita elementni bir xil z-indeks qiymati bilan ham berishingiz mumkin. Agar ushbu elementlar ketma-ketlikda joylashtirilsa, ular HTML-da yozilgan tartibda ko'rsatiladi, eng oxirgi element yuqorisida.
Bir yozuv z-index xususiyatidan samarali foydalanish uchun blok darajadagi element bo'lishi yoki CSS dagi "blok" yoki "inline-block" ko'rinishini ishlatishi kerak.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 12/09/16 yilda o'tkazildi.