Posicionado Translokantaj Elementoj kun Akvoforaj Stiloj
Unu el la defioj, kiam uzanta CSS-pozicion por retpaĝaj aranĝo estas, ke iuj el viaj elementoj povas superkovri aliajn. Ĉi tio funkcias bone, se vi volas ke la lasta elemento en la HTML estu supre, sed se vi ne aŭ ĉu vi volas havi elementojn, kiuj nuntempe ne kunmetas aliajn, ĉar la dezajno alvokas ĉi tiun "mantelon" ? Por ŝanĝi la vojon, la elementoj superkovras, vi bezonas uzi la proprieton de CSS.
Se vi uzis grafikajn ilojn en Word kaj PowerPoint aŭ pli fortika bildo redaktoro kiel Adobe Photoshop, tiam ŝajne vi vidis ion kiel z-indekso en ago. En ĉi tiuj programoj, vi povas elstari la objektojn, kiujn vi desegnis, kaj elekti opcion por "Sendi reen" aŭ "Alporti" iujn elementojn de via dokumento. En Photoshop, vi ne havas ĉi tiujn funkciojn, sed vi havas la panelon "Tavolo" de la programo kaj vi povas aranĝi, kie elemento falas en la tolon per reordigo de ĉi tiuj tavoloj. En ambaŭ ĉi tiuj ekzemploj, vi esence fiksas la z-indekson de tiuj objektoj.
Kio estas z-indekso?
Kiam vi uzas CSS-pozicion por posedi elementojn en la paĝo, vi devas pensi en tri dimensioj. Estas la du normaj dimensioj: maldekstre / dekstra kaj supre / malsupre. La maldekstra al dekstra indekso estas konata kiel la x-indekso, dum la supro al malsupre unu estas la kaj-indekso. Jen kiel vi metus elementojn horizontale aŭ vertikale, uzante ĉi tiujn du indeksojn.
Kiam envenas al dezajno retejo, ankaŭ ekzistas la stila ordo de la paĝo. Ĉiu elemento sur la paĝo povas esti manteloj supre aŭ sub iu ajn alia elemento. La z-indeksa propraĵo determinas kie en la stako ĉiu elemento estas. Se x-indekso kaj kaj-indekso estas la horizontalaj kaj vertikalaj linioj, tiam z-indekso estas la profundo de la paĝo, esence la 3-a dimensio.
Mi ŝatas pensi pri la elementoj en retpaĝo kiel pecoj de papero, kaj la retpaĝon mem kiel collage. Kie mi metas la paperon estas determinita per pozicio, kaj kiom da ĝi estas kovrita de la aliaj elementoj estas la z-indekso.
La z-indekso estas numero, aŭ pozitiva (ekz. 100) aŭ negativa (ekz. -100). La defaŭlta z-indekso estas 0. La elemento kun la plej alta z-indekso estas supre, sekvata de la plej alta kaj sekve ĝis la plej malalta z-indekso. Se du elementoj havas la saman z-indeksan valoron (aŭ ĝi ne estas difinita, kio signifas uzi la defaŭlta valoro de 0) la retumilo havos ilin laŭ la ordo, kiun ili aperas en la HTML.
Kiel Uzi z-indekson
Donu ĉiun elementon, kiun vi volas en via pilo, malsama z-indeksa valoro. Ekzemple, se mi havas kvin malsamajn elementojn:
- Elemento 1 - z-indekso de -25
- elemento 2 - z-indekso de 82
- elemento 3 - z-indekso ne aro
- elemento 4 - z-indekso de 10
- Elemento 5 - z-indekso de -3
Ili stakos en la sekva ordo:
- elemento 2
- elemento 4
- elemento 3
- Elemento 5
- Elemento 1
Mi rekomendas uzi valore malsamajn z-indeksajn valorojn por stakigi viajn elementojn. Tiel, se vi aldonas pli da elementoj al la paĝo poste, vi havas ĉambron por tavoli ilin sen devi ĝustigi la z-indeksajn valorojn de ĉiuj aliaj elementoj. Ekzemple:
- 100 por mia plejparta elemento
- 0 por mia meza elemento
- -100 por mia fundo elemento
Vi povas ankaŭ doni du elementojn la saman z-indeksan valoron. Se ĉi tiuj elementoj estas apiladitaj, ili montros laŭ la ordo, kiun ili skribas en la HTML, kun la lasta elemento supre.
Unu noto, por ero por efike uzi la z-indeksan posedaĵon, devas esti bloko-nivela elemento aŭ uzu ekranon de "bloko" aŭ "inline-block" en via CSS-dosiero.
Originala artikolo de Jennifer Krynin. Redaktita la 12/09/16 de Jeremy Girard.