Dreuchd a 'toirt thairis rudan le Cascading Style Sheets
Is e aon de na dùbhlain nuair a thathar a 'cleachdadh suidheachadh CSS airson cruth duilleag-lìn gum bi cuid de na h-eileamaidean agad a' dol thairis air feadhainn eile. Tha seo ag obair gu math ma tha thu ag iarraidh an eileamaid mu dheireadh anns an HTML a bhith air a 'bhàrr, ach dè mura h-eil thu a' dèanamh no dè ma tha thu ag iarraidh eileamaidean a tha an-dràsta nach eil a 'dol thairis air daoine eile gus sin a dhèanamh seach gu bheil an dealbhadh ag iarraidh airson an t-seallaidh "falaichte" seo ? Gus an dòigh anns am bi eileamaidean a 'dol thairis air atharrachadh feumaidh tu atharrachadh a dhèanamh air seilbh CSS.
Ma chleachd thu innealan grafaigeach ann am Word and PowerPoint no neach-deasachaidh ìomhaigh nas làidire mar Adobe Photoshop, an uairsin tha e coltach gu bheil thu air rudeigin fhaicinn mar z-index ann an gnìomh. Anns na prògraman sin, faodaidh tu an rud / na nithean a thog thu a tharraing, agus roghainn a thaghadh airson eileamaidean àraidh den sgrìobhainn agad a thoirt seachad air "Cuir gu cùl" no "Thoir gu aghaidh". Ann an Photoshop, chan eil na gnìomhan sin agad, ach tha pìos "Layer" agad sa phrògram agus faodaidh tu òrdachadh far a bheil eilthireachd a 'tuiteam anns a' chanabhas le bhith a 'ath-eagrachadh nan sreathan sin. Anns gach cuid de na h-eisimpleirean seo, tha thu gu h-àraidh a 'suidheachadh clàr-z de na rudan sin.
Dè th 'ann an z-index?
Nuair a bhios tu a 'cleachdadh suidheachadh CSS gu eileamaidean suidheachaidh air an duilleig, feumaidh tu smaoineachadh ann an trì tomhasan. Tha an dà tomhas àbhaisteach: clì / deas agus mullach / bonn. Is e an clàr-x a chanar ris an inneal-làimhe clì gu deas, fhad 'sa tha am mullach gu bonn gu h-ìosal na clàr-amais. Seo mar a bhiodh tu a 'suidheachadh eileamaidean gu cothromach no gu h-ìseal, a' cleachdadh an dà chlàr-amais sin.
Nuair a thig e gu dealbhadh lìn, tha òrdugh cruaidh na duilleige ann cuideachd. Faodaidh gach eileamaid air an duilleag a bhith nas àirde os cionn no fo eilim sam bith eile. Tha an t-seilbh z-index a 'dearbhadh càite anns a' chruach gach nì. Mas e x-index agus y-index na loidhnichean còmhnard agus dìreach, is e z-index doimhneachd na duilleige, gu h-àraidh an treas taobh.
Is toigh leam smaoineachadh air na h-eileamaidean air duilleag-lìn mar pìosan pàipeir, agus an duilleag lìn fhèin mar collage. Far a bheil mi a 'cur am pàipear air a shuidheachadh le suidheachadh, agus dè an ìre a tha air a chòmhdach leis na h-eileamaidean eile tha am z-index.
Is e an àireamh z-àireamh àireamh, aon deimhinneach (me 100) no àicheil (me -100). Is e am bunait z-index 0. Tha an eileamaid leis a 'chlàr-z as àirde air a' mhullach, agus an ath rud as àirde agus an uairsin sìos chun a 'chlàr-z as ìsle. Ma tha an aon luach z-clàr-innse aig dà eileamaid (no nach eil e air a mhìneachadh, a 'ciallachadh gu bheil luach bunaiteach 0) a chleachdadh, cuiridh am brabhsair iad san òrdugh a tha iad a' nochdadh ann an HTML.
Mar a chleachdas tu z-clàr-innse
Thoir seachad gach eileamaid a tha thu ag iarraidh anns a 'chruach agad luach z-clàr eadar-dhealaichte. Mar eisimpleir, ma tha còig eileamaidean eadar-dhealaichte agam:
- eilim 1 - z-clàr-innse de -25
- eilim 2 - z-clàr de 82
- eilim 3 - z-index gun a bhith stèidhichte
- eilim 4 - z-clàr de 10
- eilim 5 - z-clàr-innse de -3
Cruinnichidh iad san òrdugh a leanas:
- eilim 2
- eilim 4
- eilim 3
- eilim 5
- eilim 1
Tha mi a 'moladh a bhith a' cleachdadh luachan z-innéacs gu tur eadar-dhealaichte gus cruth a chur air do eileamaidean. Mar sin, ma chuireas tu barrachd eileamaidean ris an duilleag nas fhaide air adhart, tha rùm agad gus an cumail suas às aonais na luachan measaidh z de na h-eileamaidean eile atharrachadh. Mar eisimpleir:
- 100 airson mo eileamaid as àirde
- 0 airson mo eileamaid meadhain
- -100 airson an eileamaid as ìsle agam
Faodaidh tu cuideachd dà eileamaid a thoirt seachad mar an aon luach-clàr-z. Ma thèid na h-eileamaidean sin a chruachadh, nochdaidh iad san òrdugh a tha iad air an sgrìobhadh anns an HTML, leis an eileamaid mu dheireadh air a 'mhullach.
Aon nota, airson eileamaid airson an z-index index a chleachdadh gu h-èifeachdach, feumaidh e bhith na eileamaid bloic-ìre no cleachd "bloc" no "block-inline" anns an fhaidhle CSS agad.
Artaigil tùsail le Jennifer Krynin. Air a dheasachadh air 12/09/16 le Jeremy Girard.