Cascading Style Sheets ilə üst-üstə düşən elementlərin yerləşdirilməsi
Veb səhifə düzeni üçün CSS yerləşdirməsindən istifadə edərkən problemlərdən biri sizin elementlərinizdən bəziləri başqalarının üst-üstə düşə bilməsi. HTML-də son elementin üstündə olmasını istəyirsinizsə yaxşı işləyir, amma nə varsa və ya əgər bu dizaynı bu "laylı" görünüşü çağırırsa, hazırda başqaları ilə üst-üstə düşməyən elementlərə sahib olmaq istəyirsinizsə nə varsa ? Elementlərin üst-üstə düşməyini dəyişdirmək üçün CSS-nin əmlakını istifadə etməlisiniz.
Word və PowerPoint və ya Adobe Photoshop kimi daha möhkəm şəkil redaktoru ilə qrafik alətlərindən istifadə etsəniz, şansınız z-indeksi kimi bir şey gördünüz. Bu proqramlarda, çəkdiyiniz obyektləri vurğulamaq və sənədinizin bəzi elementlərini "Geri göndərmək" və ya "Ön tərəfə gətirin" seçimini seçə bilərsiniz. Photoshop'ta bu funksiyalar yoxdur, ancaq proqramın "Layer" panosuna sahibsiniz və bu elementləri düzəldərək elementin tuvalə düşdüyünü təşkil edə bilərsiniz. Bu nümunələrdən ikisi də, əsasən, bu obyektlərin z-indeksini təyin edirsiniz.
Z-indeksi nədir?
Səhifədə elementlərin yerləşdirilməsinə CSS yerləşdirməsindən istifadə etdiyiniz zaman, üç ölçülü düşünmək lazımdır. İki standart ölçü var: sol / sağ və yuxarı / aşağı. Soldan sağa indeks x-indeks kimi tanınır, üstdən aşağıya isə y indeksidir. Bu iki indeksdən istifadə edərək, elementləri yatay və ya uzununa yerləşdirə bilərsiniz.
Veb dizaynına gəldikdə, səhifənin yığma qaydası da var. Səhifənin hər bir elementi hər hansı digər elementin üstündə və ya altına qatlanmış ola bilər. Z-indeks xüsusiyyəti, hər bir elementin yığında olduğu yeri müəyyən edir. Əgər x-index və y-indeksləri yatay və şaquli xəttlərdirsə, z-index səhifənin dərinliyi, əsasən üçüncü ölçüsüdür.
Web səhifəmdəki elementləri kağız parçaları və veb səhifənin özü bir kolaj kimi düşünməyi sevirəm. Mən yerləşdirdiyim yerin yerləşdirilməsi ilə müəyyən edilir və digər elementlər arasında nə qədər əhatə olunursa, z-indeksi.
Z-indeksi, müsbət (məsələn, 100) və ya mənfi (məsələn, -100) bir nömrədir. Varsayılan z-indeksi 0-dir. Z-indeksi ən yüksək olan element yuxarıdır, sonra isə ən aşağı z-indeksinə qədər ən yüksək və daha yüksəkdir. Əgər iki element eyni z-indeksi dəyərinə malikdirsə (və ya müəyyən edilməmişsə, deməli, 0-u mənim dəyərdən istifadə edir) brauzer onları HTML-də göründüyü sırada düzəldəcəkdir.
Z-indeksi necə istifadə olunur
Istədiyiniz hər bir elementi yığınızda fərqli bir z-indeksi dəyərinə verin. Məsələn, beş ayrı elementim varsa:
- element 1 - z-indeksi -25
- element 2 - z-indeksi 82
- element 3 - z-indeksi göstərilməyib
- element 4 - z-indeksi 10
- element 5 - z-indeksi -3
Onlar aşağıdakı qaydada yığışacaq:
- element 2
- element 4
- element 3
- element 5
- element 1
Elemanlarınızı yığmaq üçün çox fərqli z-indeksi dəyərlərindən istifadə etməyi məsləhət görürəm. Beləliklə, daha sonra daha çox elementə səhifəyə əlavə etsəniz, bütün digər elementlərin z-indeksi dəyərlərini düzəltmədən onları qatlamaq üçün yeriniz var. Misal üçün:
- 100 mənim ən yaxşı element üçün
- 0 orta elementim üçün
- Alt elementim üçün -100
Eyni z-indeksi dəyərini iki elementə də verə bilərsiniz. Bu elementlər istifadəyə verildikdə, onlar HTML-də yazılmış qaydada, sonuncu elementi üstündə göstərəcəklər.
Bir qeyd, bir elementin z-index xüsusiyyətini effektiv şəkildə istifadə etməsi üçün, blok səviyyəli element olmalıdır və ya CSS dosyanızda "blok" və ya "inline-block" göstəricisini istifadə edin.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 12/09/16 tarixində redaktə edildi.