Perdangos elementų pozicionavimas su kaskadinėmis stiliaus lentelėmis
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 grafikos įrankius "Word" ir "PowerPoint" arba tvirtesnį vaizdo redaktorių, pvz., "Adobe Photoshop", tada, greičiausiai, 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 į drobę, pertvarkydamas šiuos sluoksnius. Abiejuosiuose pavyzdžiuose esate iš esmės nustatę šių objektų z indeksą.
Kas yra z-indeksas?
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.
Kada ateina į 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.
Man patinka galvoti apie elementus tinklalapyje, kaip popieriaus lapus, o pats tinklalapis - kaip koliažas. Kur aš dedu popierių, nustatomas pozicionavimas, o kiek jo apima kiti elementai yra z indeksas.
Z indeksas 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 jo eina didžiausias aukštis ir tt žemyn 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ę. Pavyzdžiui, jei aš turiu penkis skirtingus elementus:
- elementas 1 - z-indeksas -25
- elementas 2 - z indeksas 82
- elementas 3 - z-indeksas nenustatytas
- elementas 4 - z indeksas 10
- elementas 5 - z-indeksas -3
Jie bus sudėti tokia tvarka:
- elementas 2
- elementas 4
- elementas 3
- elementas 5
- elementas 1
Aš rekomenduoju naudoti labai skirtingas z indekso vertes, kad galėtumėte sukaupti elementus. 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 mano labiausiai populiariausiam elementui
- 0 mano vidutinio elemento
- -100 mano 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, norint, kad elementas efektyviai naudotų nuosavybės z-indeksą, jis turi būti bloko lygio elementas arba CSS failo ekrane rodomas "blokas" arba "inline-block".
Originalus straipsnis Jennifer Krynin. Redagavo 12/09/16 Jeremy Girard.