Z-Index in CSS

Eilimintí Forluí a Sheasamh le Bileoga Stíl Cascáideacha

Is é ceann de na dúshláin nuair atá suíomh CSS á úsáid agat le haghaidh leagan amach an leathanaigh ghréasáin ná go bhféadfadh cuid de do chuid eilimintí forluí a dhéanamh. Fágann sé seo go maith más mian leat an ghné dheireanach sa HTML a bheith ar an mbarr, ach más rud é nach ndéanann tú nó más rud é, más mian leat go mbeadh eilimintí ann nach ndéanann daoine eile forluí faoi láthair chun é sin a dhéanamh toisc go n-iarrann an dearadh an cuma "lúbtha" seo ? D'fhonn athrú a dhéanamh ar an mbealach a forluí eilimintí is gá duit maoin CSS a úsáid.

Má úsáideann tú uirlisí grafaicí i Word agus PowerPoint nó eagarthóir íomhá níos láidre cosúil le Adobe Photoshop, ansin tá seans ann go bhfuil rud éigin cosúil le z-innéacs agat i ngníomh. Sna cláir seo, is féidir leat aird a tharraingt ar an réad (na rudaí) a tharraing tú, agus an rogha a roghnú chun eilimintí áirithe de do dhoiciméad a chur ar "Seol ar ais" nó "Tabhair chun tosaigh". I Photoshop, níl na feidhmeanna seo agat, ach tá pian "Sraith" agat ar an gclár agus is féidir leat socrú a dhéanamh nuair a thagann eilimint sa chanbhás trí na sraitheanna seo a athshlánú. Sa dá shampla seo, tá tú ag bunú z-innéacs na n-ábhar sin go bunúsach.

Cad é z-innéacs?

Nuair a bhíonn suíomh CSS á úsáid agat chun eilimintí a sheasamh ar an leathanach, ní mór duit smaoineamh ar thrí ghné. Tá an dá ghné caighdeánach: clé / ar dheis agus barr / bun. Is é an t-innéacs x ar a dtugtar an t-innéacs clé go deas, agus is é an t-innéacs an barr go barr an ceann. Seo é mar a bheadh ​​tú ag seasamh eilimintí go cothrománach nó go hingearach, ag baint úsáide as an dá innéacs seo.

Nuair a thagann sé le dearadh gréasáin, tá ord cruachta an leathanaigh ann freisin. Is féidir gach gné ar an leathanach a leagan amach thuas nó faoi aon ghné eile. Cinneann an t-airíonna z-innéacs cén áit sa chruach atá i ngach gné. Más é x-innéacs agus y-innéacs na línte cothrománacha agus ingearacha, is é z-innéacs doimhneacht an leathanaigh, go bunúsach an tríú gné.

Is maith liom smaoineamh ar na heilimintí ar leathanach gréasáin mar phíosa páipéir, agus an leathanach gréasáin féin mar chollaga. I gcás ina leagann mé an páipéar, socraítear é trí shuíomhanna, agus is é an t-innéacs z an méid atá clúdaithe ag na heilimintí eile.

Is é an z-innéacs uimhir, dearfach (m.sh. 100) nó diúltach (m.sh. -100). Is é an z-innéacs réamhshocraithe 0. Tá an eilimint leis an z-innéacs is airde ar bharr, agus ansin an chéad cheann is airde agus mar sin de réir an z-innéacs is ísle. Má tá an luach z-innéacs céanna ag dhá eilimint (nó nach bhfuil sé sainmhínithe, rud a chiallaíonn go n-úsáidfear luach réamhshocraithe 0) déanfaidh an brabhsálaí iad a shíniú san ord a léiríonn siad sa HTML.

Conas Úsáid Z-Innéacs

Tabhair gach gné atá ag teastáil uait i do chruach luach z-innéacs difriúil. Mar shampla, má tá cúig eilimint agam:

Cruthóidh siad san ord seo a leanas:

  1. eilimint 2
  2. eilimint 4
  3. eilimint 3
  4. eilimint 5
  5. eilimint 1

Molaim úsáid a bhaint as luachanna z-innéacs mór difriúil chun do chuid eilimintí a mhúnlú. Ar an mbealach sin, má chuireann tú níos mó eilimintí leis an leathanach ina dhiaidh sin, tá seomra agat chun iad a chiseal gan luachanna z-innéacs na n-eilimintí eile a choigeartú. Mar shampla:

Is féidir leat dhá ghné a thabhairt ar an luach céanna z-innéacs. Má tá na heilimintí seo cruachta, taispeánfaidh siad san ord go bhfuil siad scríofa sa HTML, agus an ghné dheireanach ar an mbarr.

Nóta amháin, le haghaidh eilimint chun an úsáid z-innéacs a úsáid go héifeachtach, caithfidh sé a bheith ina eilimint blocleibhéil nó taispeántas "bloc" nó "bloc inlíne" a úsáid i do chomhad CSS.

Airteagal bunaidh le Jennifer Krynin. Arna eagraithe ag Jeremy Girard ar 12/09/16.