Vienas iš iššūkių naudojant CSS padėtį tinklalapio išdėstymui yra tai, kad kai kurie jūsų elementai gali sutapti su kitais. Tai puikiai tinka, jei norite, kad paskutinis HTML elementas būtų viršuje, bet ką daryti, jei neturite arba ką norite, jei norite, kad elementai, kurie šiuo metu neperdengia kitų, darytų tai, nes dizainas reikalauja šio "sluoksnių" išvaizdos ? Kad pakeistumėte elementų dubliavimosi būdą, turite naudoti CSS nuosavybę.
Jei naudojate "Word" ir "PowerPoint" grafikos įrankius ar tvirtesnį vaizdo redaktorių, pvz., "Adobe Photoshop", tai tikėtina, kad jūs matėte kažką panašaus į "z-index". Šiose programose galite pažymėti objektą (-us), kurį (-iuos) sukūrėte (-us), ir pasirinkite tam tikrų dokumento elementų "Siųsti atgal" arba "Atnešti priekį" parinktį. "Photoshop" neturite šių funkcijų, bet jūs turite "Layer" programos langą ir galite nustatyti, kur elementas patenka ant drobės, pertvarkius šiuos sluoksnius. Abiejuosiuose pavyzdžiuose esate iš esmės nustatę šių objektų z indeksą.
Kas yra "Z-Index"?
Kai naudojate CSS poziciją, kad pozicijos elementai būtų įdėtos į puslapį, turite galvoti trimis aspektais. Yra du standartiniai matmenys: kairė / dešinoji, viršutinė / apatinė. Indeksas iš kairės į dešinę yra žinomas kaip x indeksas, o nuo viršaus iki apačios yra y indeksas. Tokiu būdu jūs padėtumėte elementus horizontaliai arba vertikaliai, naudodami šiuos du indeksus.
Kalbant apie interneto dizainą, taip pat yra puslapio sandėliavimo tvarka. Kiekvienas elementas puslapyje gali būti sluoksniuotas virš bet kurio kito elemento arba jo. Nuosavybės z-indeksas nustato, kur kiekviename elemente yra kampas. Jei x-indeksas ir y-indeksas yra horizontalios ir vertikalios linijos, tada z-indeksas yra puslapio gylis, iš esmės 3-as matmuo.
Pagalvokite apie tinklalapio elementus kaip popieriaus lapus ir pačią tinklalapį kaip koliažą. Kur jūs užsidėkite popierių nustato pozicionavimas, ir kiek jo apima kiti elementai yra z-indeksas.
- Zindeksas yra skaičius, teigiamas (pvz., 100) arba neigiamas (pvz., -100).
- Numatytasis z indeksas yra 0.
Elementas su didžiausiu z indeksu yra ant viršaus, po to eina aukščiausias taškas ir tt iki mažiausio z indekso. Jei du elementai turi tą pačią z-indekso reikšmę (arba ji nėra apibrėžta, tai reiškia, kad naudokite numatytąją 0 reikšmę), naršyklė juos sulys, kad jie būtų rodomi HTML.
Kaip naudotis Z-indeksu
Nurodykite kiekvieną norimą elementą savo kolekcijoje kitą z indekso reikšmę. Pvz., Jei turite penkis skirtingus elementus:
- elementas A - z-indeksas -25
- elementas B - z indeksas 82
- elementas C - z-indeksas nenustatytas
- elementas D - z indeksas 10
- elementas E - z-indeksas -3
Jie bus sudėti tokia tvarka:
- elementas B
- elementas D
- elementas C
- elementas E
- elementas A
Norint sukaupti elementus, rekomenduojama naudoti žymiai skirtingas z indekso vertes. Tokiu būdu, jei vėliau pridėsite daugiau elementų prie puslapio, galėsite juos sluoksnoti, nereikės koreguoti visų kitų elementų "z" indekso verčių. Pavyzdžiui:
- 100 jūsų geriausio elemento
- 0 jūsų vidutiniam elementui
- -100 jūsų apatinio elemento
Taip pat galite nurodyti du elementus vienodą z indekso reikšmę. Jei šie elementai yra sukrauti, jie bus rodomi taip, kaip jie parašyti HTML, o paskutinysis elementas viršuje.
Viena pastaba: elementui, kuris efektyviai naudoja savybę z-index, jis turi būti bloko lygmens elementas arba naudoti CSS failo "bloko" arba "inline-block" rodymą.
