Z-index dan foydalanish

O‘ZBEKISTON RESPUBLIKASI AXBOROT TEXNOLOGIYALARI VA
KOMMUNIKATSIYALARINI RIVOJLANTIRISH VAZIRLIGI
MUHAMMAD AL-XORAZMIY NOMIDAGI
TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
SAMARQAND FILIALI
“WEB DASTURLASHGA KIRISH” fanidan


Labaratoriya №3




Tekshirdi: Djumaev S Bajardi: Fattoyev M

Guruh: 201-TTKT


SAMARQAND-2020.


Mavzu: Z-index haqida ma’lumot.
CSS-dan foydalanib elementlarni qanday qilib yopishtirish mumkin. Z-indeksi
tushuntiradi: CSS-dan foydalanib elementlarni qanday qilib yopishtirish mumkin Men
har doim CSS xususiyati z-index bilan kurashganman. Avvaliga juda oson eshitiladi.
Bundan yuqori z-indeks qiymati bo'lgan elementlar z-indekslari pastroq bo'lganlar
oldida ko'rsatiladi. Shunga qaramay, men z-indeks qiymati umuman ta'sir qilmagan
kabi ko'p holatlarga duch keldim.
Men z-index bilan sinovlar va xatolar etarli bo'lishiga va men yaxshiroq
tushunishni xohlamoqchi bo'ldim. Umid qilamanki, ushbu maqola sizga yordam
berishi mumkin, shuning uchun z-index nima uchun siz kutgan narsani
qilmayotganiga hech qachon hayron bo'lmaysiz.
Odatiy joylashtirish tartibi. Avvalo, z-indeks qo'llanilmaganda, brauzer
tarkibidagi elementlarning standart tartibini eslatib o'tamiz:
Joylashtirilmagan element bu standart pozitsiyaning statik qiymati bo'lgan
elementdir. Joylashtirilgan element - har qanday boshqa pozitsion qiymati bo'lgan
element. Boshqa qiymatlarga misollar: mutlaq, nisbiy, yopishqoq yoki sobit.
CSS:
Bu faqat misol uchun tegishli bo'lgan CSS. To'liq CSS uchun rasmlar ostidagi
havolalarni tekshiring.
1. .blue, .pink, .orange {
2. lavozim: mutlaq;
3. }
Yashil oynani biz hujjatda oxirgi marta aniqladik. Shunga qaramay, u
boshqalarning orqasida ko'rinadi, chunki u joylashtirilmagan.
Agar biz hozir ushbu elementlarning yig'ish tartibini o'zgartirishni xohlasak, zindeks xususiyatidan foydalanishimiz mumkin. Yuqori z-indeksli element pastki zindeksli element oldida ko'rinadi. Shuni ta'kidlash kerakki, z-indeks faqat
joylashtirilgan elementlar bilan ishlaydi.
1. .blue, .pink, .orange {
2. lavozim: mutlaq;
3. }
4. .blue {
5. z-indeks: 2;
6. }
7. .apelsin {
8. z-indeks: 3;
9. }
10. .green {
11. z-indeks: 100; // hech qanday ta'sir ko'rsatmaydi, chunki yashil quti joylashmagan
12. }
Yuqori z-indeksli apelsin qutisi ko'k qutining oldida ko'rsatiladi.
Aytaylik, biz pushti qutining orqasida joylashtirmoqchi bo'lgan makonimizga boshqa
joylashtirilgan katakchani qo'shamiz. Biz kodimizni quyidagiga yangilaymiz:
CSS:
1. .blue, .pink, .orange, .purple {
2. lavozim: mutlaq;
3. }
4. .siyohrang {
5. z-indeks: 0;
6. }
7. .pink {
8. z-indeks: 1;
9. }
10. .blue {
11. z-indeks: 2;
12. }
13. .apelsin {
14. z-indeks: 3;
15. }
16. .green {
17. z-indeks: 100;
18. }
Misol.
HTML QISMI.










Z-INDEX XUSUSIYATI