Staðsetja skarast þætti með skyggnusýningum
Ein af áskorunum við notkun CSS staðsetningar fyrir vefsíðu skipulag er að sum þættir þínar geta skarast aðra. Þetta virkar fínt ef þú vilt að síðasta hlutinn í HTML sé að ofan, en hvað ef þú gerir það ekki eða hvað ef þú vilt hafa þætti sem ekki skarast á milli annarra til að gera það vegna þess að hönnunin kallar á þetta "lagskipt" útlit ? Til að breyta því hvernig þættirnir skarast þarftu að nota eign CSS.
Ef þú hefur notað grafíkverkfæri í Word og PowerPoint eða sterkari myndritari eins og Adobe Photoshop, þá er líklegt að þú hafir séð eitthvað eins og z-vísitölu í aðgerð. Í þessum forritum er hægt að varpa ljósi á hlut (eðr) sem þú hefur dregið og veldu valkost til að "Senda til baka" eða "Koma til framan" tiltekinna þætti skjalsins. Í Photoshop hefur þú ekki þessar aðgerðir, en þú hefur "Layer" glugganum í forritinu og þú getur raða þar sem þáttur fellur í striga með því að endurskipuleggja þessi lög. Í báðum þessum dæmum ertu í raun að setja z-vísitölu þessara hluta.
Hvað er z-vísitölu?
Þegar þú notar CSS staðsetningu til að staðsetja þætti á síðunni þarftu að hugsa í þrívídd. Það eru tveir staðall mál: vinstri / hægri og efst / botn. Vísitalan til vinstri til hægri er þekkt sem x-vísitalan, en toppur til botns er y-vísitalan. Þetta er hvernig þú setur þætti lárétt eða lóðrétt með þessum tveimur vísitölum.
Þegar inn kemur til vefhönnunar, þá er einnig stöfunarfyrirmæli síðunnar. Hver þáttur á síðunni er hægt að lagskipt yfir eða undir einhverjum öðrum þáttum. Z-vísitölu eignin ákvarðar hvar í staflinum er hver þáttur. Ef x-vísitala og y-vísitalan eru lárétt og lóðrétt, þá er z-vísitalan dýpt síðunnar, aðallega 3. víddin.
Mér finnst gaman að hugsa um þætti á vefsíðu sem pappírsstykki og vefsíðan sjálft sem klippimynd. Þar sem ég legg á blaðið er ákvarðað af staðsetningu, og hversu mikið af því er fjallað um aðra þætti er z-vísitalan.
Z-vísitalan er tala, annaðhvort jákvæð (td 100) eða neikvæð (td -100). Sjálfgefna z-vísitalan er 0. Einingin með hæsta z-vísitöluna er efst og síðan næst hæstu og svo framvegis niður í lægsta z-vísitölu. Ef tveir þættir hafa sama z-vísitölu (eða það er ekki skilgreint, sem þýðir að nota sjálfgefið gildi 0) þá mun vafrinn laga þá í þeirri röð sem þær birtast í HTML.
Hvernig á að nota z-vísitölu
Gefðu hvern þátt sem þú vilt í stafla þínum öðruvísi z-vísitölu. Til dæmis, ef ég hef fimm mismunandi þætti:
- frumefni 1 - z-vísitala -25
- frumefni 2 - z-vísitala 82
- Eining 3 - z-vísitalan er ekki stillt
- þáttur 4 - z-vísitala 10
- frumefni 5 - z-vísitala -3
Þeir munu stafla í eftirfarandi röð:
- þáttur 2
- þáttur 4
- þáttur 3
- þáttur 5
- þáttur 1
Ég mæli með því að nota mjög mismunandi z-vísitölur til að stafla þætti þínar. Þannig að ef þú bætir við fleiri þætti á síðunni síðar, þá hefur þú pláss til að laga þau án þess að þurfa að breyta z-vísitölum allra annarra þátta. Til dæmis:
- 100 fyrir efsta hluta míns
- 0 fyrir mitt frumefni
- -100 fyrir botninn minn
Þú getur einnig gefið tveimur þáttum sama z-vísitölu. Ef þessir þættir eru stafaðar birtist þau í þeirri röð sem þau eru skrifuð í HTML, með síðasta hlutanum ofan.
Ein athugasemd, til þáttar að nota í raun z-vísitölu eignarinnar, verður það að vera blokkastig þáttur eða nota skjá á "blokk" eða "inline-blokk" í CSS skránum þínum.
Upprunaleg grein af Jennifer Krynin. Breytt á 12/09/16 af Jeremy Girard.