z-indeksi

Vetia e indeksit z të CSS përcakton rendin e elementeve kur ato mbivendosen me njëri-tjetrin kur pozicionohen. Kjo do të thotë, ju mund ta përdorni atë për të specifikuar se cili element (shtresë) do të jetë në krye, dhe cili (dhe në çfarë rendi) do të jetë poshtë tij.

Por nuk është kaq e thjeshtë. Kjo pronë është një nga të paktat në CSS që kryen dy funksione krejtësisht të ndryshme në të njëjtën kohë (si p.sh. pozicioni):

1. Vetia z-indeks përdoret për të rregulluar elementët e pozicionuar.
2. Çdo element me një z-indeks jo i barabartë me automatik krijon nivel i ri renditja, në lidhje me të cilën ajo (renditja) ndodh për të gjithë pasardhësit e saj (natyrisht, pasardhësit, indeksi z i të cilëve nuk është i barabartë me auto, tashmë krijojnë nivelin e tyre të renditjes). Kjo është arsyeja pse, për shembull, një element nga një nivel renditjeje nuk mund të "vendoset" midis dy elementeve nga një tjetër.
3. Elementi rrënjë krijon një nivel të renditjes rrënjësore, edhe nëse nuk ka një indeks z të specifikuar.

Le të shohim këtë shembull:

Në këtë shembull, për çdo vlerë të indeksit z, do të mund të ndërroni vetëm DIV3 dhe DIV4. Por sa vijon nuk do të funksionojë:

1. Nuk do të jetë e mundur të vendosni DIV3 dhe DIV4 nën DIV2, pasi ato janë aktive nivele të ndryshme duke porositur. DIV2 është në nivelin e krijuar nga elementi DIV1, dhe DIV3 dhe DIV4 janë në nivelin e krijuar nga DIV2. Në mënyrë që ato të jenë në të njëjtin nivel, duhet të hiqni indeksin z nga DIV2 ose ta vendosni në automatik.
2. Nuk do të funksionojë të vendosësh DIV2 nën DIV1. Për ta bërë atë të funksionojë, duhet të vendosni automatikisht tashmë në DIV1.
3. Dhe kështu me radhë...

Në tekste të ndryshme shkollore dhe libra referimi, koncepti i "nivelit të renditjes" quhet ndryshe - konteksti pozicional lokal, konteksti i stivës lokale, etj. Në specifikimin zyrtar të CSS është shkruar si "konteksti lokal i grumbullimit". Por, për mendimin tim, shprehja "niveli i renditjes" është më afër kuptimit për shumicën e njerëzve që flasin rusisht, kjo është arsyeja pse unë prezantova këtë përkufizim.

Lloji i pronës

Qëllimi: pozicionimi.

Zbatohet për: elementë me pozicion të ndryshëm nga ai statik.

Trashëguar: jo.

vlerat

Vlera e vetive z-indeks është të specifikojë rendin e elementeve në një nga mënyrat e mëposhtme.

• Numri- çdo numër i plotë pozitiv ose negativ që specifikon rendin e elementeve brenda një niveli të caktuar renditjeje. Një element me një vlerë më të lartë do të vendoset në krye të atyre me një vlerë më të ulët. Nëse dy elementë kanë të njëjtat vlera, atëherë ai më poshtë në kodin HTML do të jetë në krye. Përveç kësaj, një element që ka një vlerë numerike (përfshirë 0) krijon një nivel të ri renditjeje për fëmijët e tij të pozicionuar.
• auto- me këtë vlerë, elementi në nivelin aktual të renditjes ka të njëjtin indeks z si paraardhësi i tij që krijoi këtë nivel. Sidoqoftë, vetë elementi nuk krijon një nivel të ri renditjeje për pasardhësit e tij. Nëse ka disa elementë me një vlerë të caktuar, atëherë ai që shfaqet më poshtë në kodin HTML të faqes do të jetë në krye.
• trashëgojnë- trashëgon vlerën z-indeks nga elementi mëmë.

Hyrja në përqindje: nuk ekziston.

Vlera e parazgjedhur: auto.

Meqenëse brenda elementit që krijon nivelin e renditjes mund të ketë jo vetëm elementë të pozicionuar, por edhe disa të tjerë, shfletuesit përdorin rregulla të caktuara për shtresimin e tyre brenda një niveli të caktuar:

1. Shtresa e parë përmban sfondin dhe kornizën e elementit që krijoi këtë nivel renditjeje.
2. Në krye, në shtresën e dytë, janë elementët pasardhës që kanë vlera z-indeks negativ, ku elementi me vlerë më afër zeros ndodhet sipër.
3. Shtresa tjetër janë elementë pasardhës që nuk janë të integruar (inline).
4. Shtresa e katërt përbëhet nga elementë lundrues (float) së bashku me përmbajtjen e tyre.
5. Shtresa e pestë është e integruar në elementët pasardhës.
6. Shtresa e gjashtë përmban elemente me z-indeks automatik ose 0, ku elementi më poshtë në kod është më i lartë.
7. Së fundi, elementët me vlera z-indeks pozitiv janë në krye, me elementin me vlerën më të lartë që është më i lartë.

Sintaksë

z-indeksi: auto | numri | trashëgojnë

Shembull CSS: Duke përdorur z-index

Rezultati.

Versionet CSS

Shfletuesit

Internet Explorer 6.0 dhe 7.0 nuk e kuptojnë vlerën trashëgimore. Gjithashtu në këta shfletues, nivelet e reja të renditjes krijohen nga të gjithë elementët e pozicionuar, jo vetëm ato me vlera numerike të indeksit z.

IE 6.0 e pozicionon gjithmonë elementin në krye të të gjithë elementëve të faqes, pavarësisht nga vlerat e indeksit z.

Firefox 2.0 grumbullon elementë me vlera z-indeks negativ nën sfondin dhe kufirin e elementit që krijoi atë nivel rregullimi. Me fjalë të tjera, ajo ndryshon pikat 1 dhe 2 në rregullat e shtresimit.

Mësimi i sotëm, si ai i djeshmi, do t'ju tregojë për pozicionimin në CSS, si dhe një veçori shumë interesante të quajtur z-index.

Duke përdorur këtë veti, ju mund të vendosni blloqe teksti (dhe jo vetëm tekst) njëra mbi tjetrën, duke marrë diçka si një efekt 3D.

Ky mësim do të jetë shumë i dobishëm për fillestarët në dizajnin e uebit, pasi përveç informacionit teorik, do të shohim edhe një shembull praktik.

Për qartësi, shikoni dy imazhet më poshtë:

"Pozicionimi relativ"

"Pozicionimi absolut"

Siç mund ta shihni, me pozicionimin relativ, blloku me tekst vendoset në raport me paragrafin me tekst. Kur absolute - në lidhje me dritaren e shfletuesit.

Funksionimi i kësaj prone është më i lehtë për t'u shpjeguar me një imazh:

Elementi me vlerë më të lartë do të vendoset sipër.

Tani le të hedhim një vështrim më të afërt në demonstrimin tonë.

Krijimi i bllokut 1

Shtresa 1

#shtresa 1 (
sfond:#707070;
ngjyra:#fff;
pozicioni: i afërm;
gjerësia: 800 px;
lartësia: 450 px;
}

Duke përdorur stile, ne i japim këtij blloku pozicionimin relativ. Falë kësaj, ne mund të vendosim blloqe shtesë brenda.

Krijimi i bllokut të dytë

Për analogji me bllokun e parë, ne krijojmë një bllok. Ky bllok ndryshon vetëm në identifikuesin e tij (id="layer2").

Shtresa 2

Lorem Ipsum është thjesht tekst i rremë i shtypjes dhe i radhitjes
industrisë. Lorem Ipsum ka qenë teksti standard standard i industrisë
qysh në vitet 1500, kur një printer i panjohur mori një galeri të tipit
dhe e përzien për të bërë një libër ekzemplar tipi. Nuk ka mbijetuar
vetëm pesë shekuj, por edhe kapërcimi drejt radhitjes elektronike,
duke mbetur në thelb i pandryshuar. Ai u popullarizua në vitet 1960
me lëshimin e fletëve Letraset që përmbajnë pasazhe Lorem Ipsum,
dhe së fundmi me softuerin e botimit desktop si Aldus
PageMaker duke përfshirë versionet e Lorem Ipsum.

#shtresa 2 (
sfond:#f9ad81;
ngjyra:#fff;
pozicioni:absolut;
krye: 40 px;
majtas: 50 px;
gjerësia: 400 px;
lartësia: 400 px;
z-indeksi: 1;
}

I japim bllokut të dytë pozicionimin absolut. Tani ai do të jetë patjetër brenda të parës dhe nuk do të shkojë askund. Përveç kësaj, ne përcaktojmë atributin z-indeks (=1). Kjo do të thotë se blloku nr. 2 do të vendoset mbi të parin.

Krijimi i bllokut të 3-të

Shtresa 3

Lorem Ipsum është thjesht tekst i rremë i shtypjes dhe i radhitjes
industrisë. Lorem Ipsum ka qenë teksti standard standard i industrisë
qysh në vitet 1500, kur një printer i panjohur mori një galeri të tipit
dhe e përzien për të bërë një libër ekzemplar tipi. Nuk ka mbijetuar
vetëm pesë shekuj, por edhe kapërcimi drejt radhitjes elektronike,
duke mbetur në thelb i pandryshuar. Ai u popullarizua në vitet 1960
me lëshimin e fletëve Letraset që përmbajnë pasazhe Lorem Ipsum,
dhe së fundmi me softuerin e botimit desktop si Aldus
PageMaker duke përfshirë versionet e Lorem Ipsum.

#shtresa 3 (
sfond:#6dcff6;
ngjyra:#fff;
pozicioni:absolut;
sipër: 80px;
majtas: 100 px;
gjerësia: 600 px;
lartësia: 200 px;
z-indeksi: 2;
}

Në këtë bllok z-indeksi = 2.

Mund të provoni të ndërroni indekset e bllokut dhe të shihni rezultatin.

Mos harroni se një element me një z-indeks më të ulët do të jetë gjithmonë nën një element me një indeks më të lartë. Kjo do të thotë, mund t'i jepni bllokut nr. 1 një indeks = 999, dhe bllokut nr. 2 - 1000. Rezultati do të jetë i njëjtë.

Kaq për sot! Faleminderit për vëmendjen tuaj!

Informacion i shkurtër

Versionet CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Përshkrimi

Çdo element i pozicionuar në një faqe interneti mund të vendoset njëri mbi tjetrin në një renditje të caktuar, duke simuluar kështu një dimension të tretë pingul me ekranin. Çdo element mund të jetë ose poshtë ose mbi objekte të tjera në faqen e internetit, vendosja e tyre përgjatë boshtit z kontrollohet nga z-index . Kjo veti funksionon vetëm për elementë, vlera e pozicionit të të cilëve është absolute, fikse ose relative.

Sintaksë

z-indeksi: numri | auto | trashëgojnë

vlerat

Si vlera përdoren numra të plotë (pozitiv, negativ dhe zero). Sa më e lartë të jetë vlera, aq më i lartë është elementi në krahasim me ato elemente që kanë një vlerë më të ulët. Nëse vlera e z-indeksit është e barabartë, elementi në plan të parë është ai i përshkruar më poshtë në kodin HTML. Megjithëse specifikimi lejon përdorimin e vlerave negative të indeksit z, elementë të tillë nuk shfaqen në Shfletuesi Firefox deri në versionin 2.0 përfshirës.

Përveç vlerat numerike përdoret auto - rendi i elementeve në këtë rast ndërtohet automatikisht në bazë të pozicionit të tyre në kodin HTML dhe përkatësisë së tyre prindit, pasi elementët fëmijë kanë të njëjtin numër si elementi i tyre prind. Vlera e trashëguar tregon se është trashëguar nga prindi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Shtresa 1 sipër

Shtresa 1

Shtresa 2

Shtresa 4 sipër

Shtresa 3

Shtresa 4

Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Zbatimi i vetive z-index

Modeli i objektit

document.getElementById("elementID").style.zIndex

Shfletuesit

Lista e krijuar duke përdorur etiketën

, V Shfletuesi i internetit Explorer 6 shfaqet gjithmonë në krye të elementeve të tjerë, pavarësisht nga vlera e indeksit z.

Versionet e Internet Explorer deri dhe duke përfshirë 7.0 nuk e mbështesin vlerën e trashëguar dhe e interpretojnë automatikisht si 0.

Në versionet e shfletuesit Firefox deri dhe duke përfshirë 2.0, një vlerë negative z-indeksi e pozicionon elementin poshtë sfondit të faqes së internetit dhe përmbajtjes së saj.

Problemi me z-index është se shumë njerëz thjesht nuk e kuptojnë se si funksionon.
Gjithçka e përshkruar më poshtë është në specifikimet e W3C. Fatkeqësisht, jo të gjithë e lexojnë.

Përshkrimi i problemit:

Më poshtë është kodi HTML me dizajnin bazë të CSS.

Detyra: sigurohuni që e kuqja të jetë prapa blusë dhe jeshiles, pa shkelur asnjë nga rregullat e mëposhtme:

• Ju nuk mund të ndryshoni shënimin HTML
• Ju nuk mund të ndryshoni/shtoni z-indeks në elementë
• Ju nuk mund të ndryshoni/shtoni pozicionimin tek elementët

Zgjidhja:

Hmm, diçka nuk është në rregull këtu. Çfarë lidhje ka transparenca me të? Si mund të ndikojë në renditjen e elementeve të mbivendosura? Mendoni të njëjtën gjë? Mirë se vini në klub!
Shpresoj që në pjesën e dytë të artikullit gjithçka të bjerë në vend.

Rendi i mbivendosjes së elementeve:

Çdo element në dokument HTML mund të jetë ose në plan të parë ose në sfond. Të gjithë e dinë këtë. Rregullat që përcaktojnë këtë renditje përshkruhen qartë në specifikim, por, siç thashë më lart, jo të gjithë i kuptojnë plotësisht ato.

Nëse indeksi z dhe vetitë e pozicionimit nuk janë vendosur në mënyrë eksplicite, gjithçka është e thjeshtë: rendi i grumbullimit është i barabartë me rendin e elementeve në HTML. (Në fakt është pak më e ndërlikuar se kaq, por për sa kohë që nuk përdorni vlera negative të mbushjes për të mbivendosur elementët e linjës, nuk do të hasni në rastet e skajeve)

Nëse specifikoni në mënyrë eksplicite pozicionimin për elementët (dhe fëmijët e tyre), atëherë elementë të tillë do të mbivendosen elementë pa një veçori të qartë pozicionimi. (Kur them "përcaktoni në mënyrë eksplicite pozicionimin", nënkuptoj çdo vlerë tjetër përveç statike, për shembull: absolute ose relative).

Dhe së fundi, rasti kur jepet indeksi z. Si fillim, është e natyrshme të supozohet se elementët me një indeks z të madh do të jenë mbi elementët me një indeks z më të vogël dhe çdo element me një grup indeks z do të jetë mbi një element pa një grup indeks z, por kjo nuk është rasti. Së pari, z-indeksi merret parasysh vetëm në elementët e pozicionuar në mënyrë eksplicite. Nëse përpiqeni të vendosni indeksin z në një element jo të pozicionuar, asgjë nuk do të ndodhë. Së dyti, vlerat e indeksit z mund të krijojnë kontekste mbivendosje. Hmm, gjërat u ndërlikuan shumë, apo jo?

Konteksti i mbivendosjes

Çdo kontekst mbivendosje ka elementin e vet rrënjë në strukturën HTML. Në momentin që mbi një element formohet një kontekst i ri, të gjithë elementët fëmijë gjithashtu bien në këtë kontekst dhe zënë vendin e tyre në rendin e mbivendosjes. Nëse një element është i pozicionuar në fund të një konteksti mbivendosjeje, nuk ka asnjë mënyrë që në ferr të mund të shfaqet mbi një element tjetër në një kontekst mbivendosjeje ngjitur më lart në hierarki, edhe me një indeks z të vendosur në një milion.

Një kontekst i ri mund të formohet në rastet e mëposhtme:

• Nëse elementi është elementi rrënjësor i dokumentit (elementi)
  Nëse elementi nuk është i pozicionuar në mënyrë statike dhe vlera e indeksit z nuk është automatik
  Nëse elementi ka opacitet më të vogël se 1

Problemi me z-index është se shumë njerëz thjesht nuk e kuptojnë se si funksionon.
Gjithçka e përshkruar më poshtë është në specifikimet e W3C. Fatkeqësisht, jo të gjithë e lexojnë.

Përshkrimi i problemit:

Më poshtë është kodi HTML me dizajnin bazë të CSS.

Detyra: sigurohuni që e kuqja të jetë prapa blusë dhe jeshiles, pa shkelur asnjë nga rregullat e mëposhtme:

• Ju nuk mund të ndryshoni shënimin HTML
• Ju nuk mund të ndryshoni/shtoni z-indeks në elementë
• Ju nuk mund të ndryshoni/shtoni pozicionimin tek elementët

Zgjidhja:

Hmm, diçka nuk është në rregull këtu. Çfarë lidhje ka transparenca me të? Si mund të ndikojë në renditjen e elementeve të mbivendosura? Mendoni të njëjtën gjë? Mirë se vini në klub!
Shpresoj që në pjesën e dytë të artikullit gjithçka të bjerë në vend.

Rendi i mbivendosjes së elementeve:

Çdo element në një dokument HTML mund të jetë ose në plan të parë ose në sfond. Të gjithë e dinë këtë. Rregullat që përcaktojnë këtë renditje përshkruhen qartë në specifikim, por, siç thashë më lart, jo të gjithë i kuptojnë plotësisht ato.

Nëse indeksi z dhe vetitë e pozicionimit nuk janë vendosur në mënyrë eksplicite, gjithçka është e thjeshtë: rendi i grumbullimit është i barabartë me rendin e elementeve në HTML. (Në fakt është pak më e ndërlikuar se kaq, por për sa kohë që nuk përdorni vlera negative të mbushjes për të mbivendosur elementët e linjës, nuk do të hasni në rastet e skajeve)

Nëse specifikoni në mënyrë eksplicite pozicionimin për elementët (dhe fëmijët e tyre), atëherë elementë të tillë do të mbivendosen elementë pa një veçori të qartë pozicionimi. (Kur them "përcaktoni në mënyrë eksplicite pozicionimin", nënkuptoj çdo vlerë tjetër përveç statike, për shembull: absolute ose relative).

Dhe së fundi, rasti kur jepet indeksi z. Si fillim, është e natyrshme të supozohet se elementët me një indeks z të madh do të jenë mbi elementët me një indeks z më të vogël dhe çdo element me një grup indeks z do të jetë mbi një element pa një grup indeks z, por kjo nuk është rasti. Së pari, z-indeksi merret parasysh vetëm në elementët e pozicionuar në mënyrë eksplicite. Nëse përpiqeni të vendosni indeksin z në një element jo të pozicionuar, asgjë nuk do të ndodhë. Së dyti, vlerat e indeksit z mund të krijojnë kontekste mbivendosje. Hmm, gjërat u ndërlikuan shumë, apo jo?

Konteksti i mbivendosjes

Çdo kontekst mbivendosje ka elementin e vet rrënjë në strukturën HTML. Në momentin që mbi një element formohet një kontekst i ri, të gjithë elementët fëmijë gjithashtu bien në këtë kontekst dhe zënë vendin e tyre në rendin e mbivendosjes. Nëse një element është i pozicionuar në fund të një konteksti mbivendosjeje, nuk ka asnjë mënyrë që në ferr të mund të shfaqet mbi një element tjetër në një kontekst mbivendosjeje ngjitur më lart në hierarki, edhe me një indeks z të vendosur në një milion.

Një kontekst i ri mund të formohet në rastet e mëposhtme:

• Nëse elementi është elementi rrënjësor i dokumentit (elementi)
  Nëse elementi nuk është i pozicionuar në mënyrë statike dhe vlera e indeksit z nuk është automatik
  Nëse elementi ka opacitet më të vogël se 1