z indeksas

CSS z indekso nuosavybė apibrėžia elementų tvarką, kai jie yra išdėstyti vienas su kitu. Tai yra, galite jį naudoti norėdami nurodyti, kuris elementas (sluoksnis) bus viršuje, o kuris (ir kokia tvarka) bus po juo.

Bet tai nėra taip paprasta. Ši savybė yra viena iš nedaugelio CSS, kuri vienu metu atlieka dvi visiškai skirtingas funkcijas (pvz., poziciją):

1. z indekso savybė naudojama išdėstytiems elementams išdėstyti.
2. Kiekvienas elementas, kurio z indeksas nėra lygus automatiniam, sukuriamas naujas lygis tvarka, kurios atžvilgiu ji (tvarka) atsiranda visiems jos palikuonims (natūralu, kad palikuonys, kurių z indeksas nėra lygus auto, jau sukuria savo eilės lygį). Štai kodėl, pavyzdžiui, elementas iš vieno užsakymo lygio negali būti „padėtas“ tarp dviejų elementų iš kito.
3. Šaknies elementas sukuria šakninį eilės lygį, net jei jame nenurodytas z indeksas.

Pažiūrėkime į šį pavyzdį:

Šiame pavyzdyje bet kokias z indekso vertes galėsite pakeisti tik DIV3 ir DIV4. Tačiau šie veiksmai neveiks:

1. DIV3 ir DIV4 nebus galima įtraukti į DIV2, nes jie įjungti skirtingų lygių užsakymas. DIV2 yra elemento DIV1 sukurtame lygyje, o DIV3 ir DIV4 yra DIV2 sukurtame lygyje. Kad jie būtų tame pačiame lygyje, turite pašalinti z indeksą iš DIV2 arba nustatyti jį į automatinį .
2. Nepavyks įtraukti DIV2 į DIV1. Kad tai veiktų, turite nustatyti automatinį režimą jau ties DIV1.
3. Ir taip toliau...

Skirtinguose vadovėliuose ir žinynuose sąvoka „Užsakymo lygis“ vadinama skirtingai - vietinis pozicinis kontekstas, vietinis krūvos kontekstas ir kt. Oficialioje CSS specifikacijoje tai parašyta kaip „vietinis krovimo kontekstas“. Tačiau, mano nuomone, frazė „užsakymo lygis“ yra arčiau supratimo daugumai rusakalbių žmonių, todėl aš įvedžiau šį apibrėžimą.

Nuosavybės tipas

Paskirtis: padėties nustatymas.

Taikoma: elementams, kurių padėtis yra kitokia nei statinė.

Paveldima: ne.

Vertybės

Ypatybės z indeksas reikšmė yra nurodyti elementų tvarką vienu iš šių būdų.

• Skaičius- bet koks teigiamas arba neigiamas sveikasis skaičius, nurodantis elementų tvarką tam tikrame eilės lygyje. Didesnę vertę turintis elementas bus dedamas virš elementų, kurių vertė mažesnė. Jei du elementai turi tas pačias reikšmes, žemiau esantis HTML kode bus viršuje. Be to, elementas, turintis skaitinę reikšmę (įskaitant 0), sukuria naują užsakymo lygį savo padėties vaikams.
• auto- naudojant šią vertę, dabartinio užsakymo lygio elementas turi tą patį z indeksą kaip ir jo protėvis, kuris sukūrė šį lygį. Tačiau pats elementas nesukuria naujo užsakymo lygio savo palikuonims. Jei yra keli elementai su nurodyta verte, tada tas, kuris rodomas žemiau puslapio HTML kode, bus viršuje.
• paveldėti- paveldi z indekso reikšmę iš pirminio elemento.

Įvedimo procentas: neegzistuoja.

Numatytoji vertė: auto.

Kadangi elemento, kuris sukuria užsakymo lygį, viduje gali būti ne tik išdėstyti elementai, bet ir kai kurie kiti, naršyklės naudoja tam tikras taisykles, kad juos sluoksniuotų tam tikrame lygyje:

1. Pirmame sluoksnyje yra elemento, kuris sukūrė šį užsakymo lygį, fonas ir rėmelis.
2. Viršuje, antrajame sluoksnyje, yra palikuonys elementai, turintys neigiamas z indekso reikšmes, o elementas, kurio vertė artimesnė nuliui, yra aukščiau.
3. Kitas sluoksnis yra palikuonys elementai, kurie nėra įmontuoti (įdėta).
4. Ketvirtasis sluoksnis susideda iš plūduriuojančių elementų (plūdės) kartu su jų turiniu.
5. Penktasis sluoksnis yra įmontuoti palikuonys elementai.
6. Šeštajame sluoksnyje yra elementai su z-index auto arba 0, kur žemiau esantis elementas kode yra didesnis.
7. Galiausiai elementai su teigiamomis z indekso reikšmėmis yra pačiame viršuje, o elementas su didesne verte yra didesnis.

Sintaksė

z indeksas: auto | numeris | paveldėti

CSS pavyzdys: z indekso naudojimas

Rezultatas.

CSS versijos

Naršyklės

Internet Explorer 6.0 ir 7.0 nesupranta paveldėjimo reikšmės. Taip pat šiose naršyklėse naujus užsakymo lygius sukuria visi išdėstyti elementai, o ne tik tie, kurie turi skaitines z indekso reikšmes.

IE 6.0 visada nustato elemento padėtį visų puslapio elementų viršuje, neatsižvelgiant į z indekso reikšmes.

„Firefox 2.0“ sukrauna elementus su neigiamomis z indekso reikšmėmis po elemento, kuris sukūrė tą išdėstymo lygį, fone ir kraštinėje. Kitaip tariant, sluoksniavimo taisyklėse pakeičiami 1 ir 2 punktai.

Šiandienos pamoka, kaip ir vakarykštė, papasakos apie padėties nustatymą CSS, taip pat apie labai įdomią savybę, vadinamą z-index.

Naudodami šią savybę galite sudėti teksto blokus (ir ne tik tekstą) vieną ant kito ir gauti kažką panašaus į 3D efektą.

Ši pamoka bus labai naudinga pradedantiesiems interneto dizaino srityje, nes be teorinės informacijos pažvelgsime ir į praktinį pavyzdį.

Aiškumo dėlei pažiūrėkite du toliau pateiktus vaizdus:

„Santykinis padėties nustatymas“

„Absoliutus pozicionavimas“

Kaip matote, naudojant santykinę padėtį, blokas su tekstu dedamas pastraipos su tekstu atžvilgiu. Kai absoliutus – naršyklės lango atžvilgiu.

Šios savybės veikimą lengviausia paaiškinti vaizdu:

Didesnę vertę turintis elementas bus pateiktas aukščiau.

Dabar atidžiau pažvelkime į mūsų demonstracinę versiją.

1-ojo bloko sukūrimas

1 sluoksnis

#layer1 (
fonas:#707070;
spalva: #fff;
padėtis:santykinė;
plotis: 800 pikselių;
aukštis: 450 pikselių;
}

Naudodami stilius suteikiame šiam blokui santykinę padėtį. Dėl to viduje galime įdėti papildomų blokų.

2-ojo bloko kūrimas

Pagal analogiją su 1-uoju bloku sukuriame bloką. Šis blokas skiriasi tik savo identifikatoriumi (id="layer2").

2 sluoksnis

Lorem Ipsum yra tiesiog netikras spausdinimo ir rinkimo tekstas
pramonė. Lorem Ipsum buvo pramonės standartinis fiktyvus tekstas
nuo 1500-ųjų, kai nežinomas spausdintuvas paėmė šrifto virtuvę
ir iškrapštė ją, kad padarytų tipo pavyzdinę knygą. Tai neišliko
tik penki šimtmečiai, bet ir šuolis į elektroninį spausdinimą,
iš esmės nepasikeitė. Jis buvo išpopuliarintas 1960 m
išleidus Letraset lapus su Lorem Ipsum ištraukomis,
o pastaruoju metu su stalinių kompiuterių leidybos programine įranga, tokia kaip Aldus
PageMaker, įskaitant Lorem Ipsum versijas.

#layer2 (
fonas:#f9ad81;
spalva: #fff;
padėtis: absoliutus;
viršuje: 40px;
kairėje:50px;
plotis: 400 pikselių;
aukštis: 400px;
z indeksas: 1;
}

Antram blokui suteikiame absoliučią padėtį. Dabar jis tikrai bus pirmojo viduje ir niekur nedings. Be to, apibrėžiame z indekso atributą (=1). Tai reiškia, kad blokas Nr. 2 bus virš pirmojo.

3 bloko sukūrimas

3 sluoksnis

Lorem Ipsum yra tiesiog netikras spausdinimo ir rinkimo tekstas
pramonė. Lorem Ipsum buvo pramonės standartinis fiktyvus tekstas
nuo 1500-ųjų, kai nežinomas spausdintuvas paėmė šrifto virtuvę
ir iškrapštė ją, kad padarytų tipo pavyzdinę knygą. Tai neišliko
tik penki šimtmečiai, bet ir šuolis į elektroninį spausdinimą,
iš esmės nepasikeitė. Jis buvo išpopuliarintas 1960 m
išleidus Letraset lapus su Lorem Ipsum ištraukomis,
o pastaruoju metu su stalinių kompiuterių leidybos programine įranga, tokia kaip Aldus
PageMaker, įskaitant Lorem Ipsum versijas.

#layer3 (
fonas:#6dcff6;
spalva: #fff;
padėtis: absoliutus;
viršuje: 80px;
kairėje:100px;
plotis: 600px;
aukštis: 200px;
z indeksas: 2;
}

Šiame bloke z indeksas = 2.

Galite pabandyti sukeisti blokų indeksus ir pamatyti rezultatą.

Atminkite, kad elementas su mažesniu z indeksu visada bus žemiau elemento su aukštesniu. Tai reiškia, kad blokui Nr. 1 galite suteikti indeksą = 999, o blokui Nr. 2 - 1000. Rezultatas bus toks pat.

Tai viskas šiai dienai! Dėkojame už dėmesį!

Trumpa informacija

CSS versijos

CSS 1	CSS 2	CSS 2.1	CSS 3

Aprašymas

Bet kokie tinklalapio elementai gali būti sukrauti vienas ant kito tam tikra tvarka, taip imituojant trečiąjį matmenį, statmeną ekranui. Kiekvienas elementas gali būti po arba virš kitų tinklalapio objektų, jų išdėstymas išilgai z ašies yra valdomas z indeksu . Ši savybė veikia tik elementams, kurių padėties reikšmė yra absoliuti, fiksuota arba santykinė.

Sintaksė

z indeksas: skaičius | auto | paveldėti

Vertybės

Sveikieji skaičiai (teigiami, neigiami ir nuliai) naudojami kaip reikšmės. Kuo didesnė vertė, tuo didesnis elementas lyginamas su tais elementais, kurių vertė mažesnė. Jei z indekso reikšmė yra lygi, priekiniame plane esantis elementas yra tas, kuris aprašytas toliau HTML kode. Nors specifikacija leidžia naudoti neigiamas z indekso reikšmes, tokie elementai nerodomi Firefox naršyklė iki 2.0 versijos imtinai.

Išskyrus skaitinės reikšmės naudojamas automatinis – elementų tvarka šiuo atveju sukuriama automatiškai, atsižvelgiant į jų vietą HTML kode ir priklausymą pirminiam elementui, nes antriniai elementai turi tą patį numerį kaip ir pirminis elementas. Paveldėjimo reikšmė rodo, kad ji paveldėta iš pirminio.

HTML5 CSS2.1 IE Cr Op Sa Fx

1 sluoksnis viršuje

1 sluoksnis

2 sluoksnis

4 sluoksnis viršuje

3 sluoksnis

4 sluoksnis

Šio pavyzdžio rezultatas parodytas fig. 1.

Ryžiai. 1. z indekso savybės taikymas

Objekto modelis

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

Naršyklės

Sąrašas sukurtas naudojant žymą

, V Interneto naršyklė„Explorer 6“ visada pasirodo virš kitų elementų, neatsižvelgiant į z indekso reikšmę.

Internet Explorer versijos iki 7.0 imtinai nepalaiko paveldėjimo reikšmės ir interpretuoja automatinį kaip 0.

„Firefox“ naršyklės versijose iki 2.0 imtinai, neigiama z indekso reikšmė pateikia elementą po tinklalapio fonu ir jo turiniu.

z indekso problema yra ta, kad daugelis žmonių tiesiog nesupranta, kaip jis veikia.
Viskas, kas aprašyta toliau, yra W3C specifikacijoje. Deja, ne visi ją skaito.

Problemos aprašymas:

Žemiau yra HTML kodas su pagrindiniu CSS dizainu.

Užduotis:įsitikinkite, kad po mėlynos ir žalios yra raudona, nepažeisdami šių taisyklių:

• Negalite pakeisti HTML žymėjimo
• Negalite pakeisti / pridėti z indekso prie elementų
• Negalite pakeisti / pridėti elementų padėties

Sprendimas:

Hmm, kažkas čia ne taip. Ką su tuo turi skaidrumas? Kaip tai gali paveikti persidengiančių elementų tvarką? Ar manote taip pat? Sveiki atvykę į klubą!
Tikiuosi, kad antroje straipsnio dalyje viskas stos į savo vietas.

Perdengimo elementų tvarka:

Bet koks elementas HTML dokumentas gali būti tiek priekiniame plane, tiek fone. Visi tai žino. Taisyklės, apibrėžiančios šią tvarką, yra aiškiai aprašytos specifikacijoje, tačiau, kaip minėjau aukščiau, ne visi jas iki galo supranta.

Jei z indeksas ir padėties nustatymo ypatybės nenustatytos aiškiai, viskas paprasta: krovimo tvarka yra lygi elementų tvarkai HTML. (Tiesą sakant, tai šiek tiek sudėtingesnė, bet jei nenaudosite neigiamų užpildymo verčių, kad perdengtumėte eilutinius elementus, nepateksite į kraštutinius atvejus)

Jei aiškiai nurodote elementų (ir jų antrinių) pozicionavimą, tokie elementai sutaps su elementais be aiškios padėties nustatymo savybės. (Kai sakau „aiškiai nurodykite padėties nustatymą“, turiu omenyje bet kokią vertę, išskyrus statinę, pavyzdžiui: absoliučią arba santykinę).

Ir galiausiai atvejis, kai pateikiamas z indeksas. Pirmiausia natūralu manyti, kad elementai su dideliu z indeksu bus virš elementų su mažesniu z indeksu, o bet kuris elementas su z indekso rinkiniu bus virš elemento be z indekso rinkinio, bet tai taip nėra. Pirma, į z indeksą atsižvelgiama tik aiškiai išdėstytuose elementuose. Jei bandysite nustatyti z indeksą nepadėtame elemente, nieko neatsitiks. Antra, z indekso reikšmės gali sukurti perdangos kontekstus. Hmm, viskas tapo daug sudėtingiau, ar ne?

Perdangos kontekstas

Kiekvienas perdangos kontekstas turi savo pagrindinį elementą HTML struktūroje. Šiuo metu elemente formuojamas naujas kontekstas, visi antriniai elementai taip pat patenka į šį kontekstą ir užima vietą perdangos eilėje. Jei elementas yra pačioje vieno perdangos konteksto apačioje, jokiu būdu jis negali būti rodomas virš kito elemento gretimame perdangos kontekste, esančiame aukščiau hierarchijos, net jei z indeksas nustatytas į milijoną.

Naujas kontekstas gali susidaryti šiais atvejais:

• Jei elementas yra pagrindinis dokumento elementas (elementas)
  Jei elementas nėra statiškai išdėstytas ir jo z indekso reikšmė nėra automatinė
  Jei elemento neskaidrumas yra mažesnis nei 1

z indekso problema yra ta, kad daugelis žmonių tiesiog nesupranta, kaip jis veikia.
Viskas, kas aprašyta toliau, yra W3C specifikacijoje. Deja, ne visi ją skaito.

Problemos aprašymas:

Žemiau yra HTML kodas su pagrindiniu CSS dizainu.

Užduotis:įsitikinkite, kad po mėlynos ir žalios yra raudona, nepažeisdami šių taisyklių:

• Negalite pakeisti HTML žymėjimo
• Negalite pakeisti / pridėti z indekso prie elementų
• Negalite pakeisti / pridėti elementų padėties

Sprendimas:

Hmm, kažkas čia ne taip. Ką su tuo turi skaidrumas? Kaip tai gali paveikti persidengiančių elementų tvarką? Ar manote taip pat? Sveiki atvykę į klubą!
Tikiuosi, kad antroje straipsnio dalyje viskas stos į savo vietas.

Perdengimo elementų tvarka:

Bet kuris HTML dokumento elementas gali būti pirmame plane arba fone. Visi tai žino. Taisyklės, apibrėžiančios šią tvarką, yra aiškiai aprašytos specifikacijoje, tačiau, kaip minėjau aukščiau, ne visi jas iki galo supranta.

Jei z indeksas ir padėties nustatymo ypatybės nenustatytos aiškiai, viskas paprasta: krovimo tvarka yra lygi elementų tvarkai HTML. (Tiesą sakant, tai šiek tiek sudėtingesnė, bet jei nenaudosite neigiamų užpildymo verčių, kad perdengtumėte eilutinius elementus, nepateksite į kraštutinius atvejus)

Jei aiškiai nurodote elementų (ir jų antrinių) pozicionavimą, tokie elementai sutaps su elementais be aiškios padėties nustatymo savybės. (Kai sakau „aiškiai nurodykite padėties nustatymą“, turiu omenyje bet kokią vertę, išskyrus statinę, pavyzdžiui: absoliučią arba santykinę).

Ir galiausiai atvejis, kai pateikiamas z indeksas. Pirmiausia natūralu manyti, kad elementai su dideliu z indeksu bus virš elementų su mažesniu z indeksu, o bet kuris elementas su z indekso rinkiniu bus virš elemento be z indekso rinkinio, bet tai taip nėra. Pirma, į z indeksą atsižvelgiama tik aiškiai išdėstytuose elementuose. Jei bandysite nustatyti z indeksą nepadėtame elemente, nieko neatsitiks. Antra, z indekso reikšmės gali sukurti perdangos kontekstus. Hmm, viskas tapo daug sudėtingiau, ar ne?

Perdangos kontekstas

Kiekvienas perdangos kontekstas turi savo pagrindinį elementą HTML struktūroje. Šiuo metu elemente formuojamas naujas kontekstas, visi antriniai elementai taip pat patenka į šį kontekstą ir užima vietą perdangos eilėje. Jei elementas yra pačioje vieno perdangos konteksto apačioje, jokiu būdu jis negali būti rodomas virš kito elemento gretimame perdangos kontekste, esančiame aukščiau hierarchijos, net jei z indeksas nustatytas į milijoną.

Naujas kontekstas gali susidaryti šiais atvejais:

• Jei elementas yra pagrindinis dokumento elementas (elementas)
  Jei elementas nėra statiškai išdėstytas ir jo z indekso reikšmė nėra automatinė
  Jei elemento neskaidrumas yra mažesnis nei 1