z-index

Vlastnosť z-index CSS definuje poradie prvkov, keď sa pri umiestnení navzájom prekrývajú. To znamená, že ho môžete použiť na určenie, ktorý prvok (vrstva) bude navrchu a ktorý (a v akom poradí) bude pod ním.

Ale také jednoduché to nie je. Táto vlastnosť je jednou z mála v CSS, ktorá vykonáva dve úplne odlišné funkcie naraz (napríklad pozíciu):

1. Vlastnosť z-index sa používa na usporiadanie umiestnených prvkov.
2. Každý prvok so z-indexom, ktorý sa nerovná automatickému vytváraniu nová úroveň zoradenie, voči ktorému sa (usporiadanie) vyskytuje pre všetkých jeho potomkov (prirodzene, potomkovia, ktorých z-index sa nerovná auto, už vytvárajú svoju vlastnú úroveň zoradenia). To je dôvod, prečo napríklad prvok z jednej úrovne usporiadania nemôže byť „umiestnený“ medzi dva prvky z inej.
3. Koreňový prvok vytvorí koreňovú úroveň usporiadania, aj keď nemá zadaný z-index.

Pozrime sa na tento príklad:

V tomto príklade pre akúkoľvek číselnú hodnotu z-indexu budete môcť zameniť iba DIV3 a DIV4. Ale nasledujúce nebude fungovať:

1. DIV3 a DIV4 nebude možné vložiť pod DIV2, pretože sú zapnuté rôzne úrovne objednávanie. DIV2 je na úrovni vytvorenej prvkom DIV1 a DIV3 a DIV4 sú na úrovni vytvorenej prvkom DIV2. Aby boli na rovnakej úrovni, musíte z DIV2 odstrániť z-index alebo ho nastaviť na auto .
2. Nepodarí sa umiestniť DIV2 pod DIV1. Aby to fungovalo, musíte nastaviť auto už pri DIV1.
3. A tak ďalej...

V rôznych učebniciach a referenčných knihách sa pojem „úroveň objednávania“ nazýva inak – miestny pozičný kontext, miestny kontext zásobníka atď. V oficiálnej špecifikácii CSS je to napísané ako „lokálny kontext stohovania“. Ale podľa môjho názoru je fráza „úroveň usporiadania“ pre väčšinu rusky hovoriacich ľudí bližšie k pochopeniu, a preto som zaviedol túto definíciu.

Typ nehnuteľnosti

Účel: polohovanie.

Platí pre: prvky s inou ako statickou polohou.

Zdedené: nie.

hodnoty

Hodnota vlastnosti z-index je určiť poradie prvkov jedným z nasledujúcich spôsobov.

• číslo- akékoľvek kladné alebo záporné celé číslo, ktoré určuje poradie prvkov v rámci danej úrovne usporiadania. Prvok s vyššou hodnotou sa umiestni nad prvky s nižšou hodnotou. Ak majú dva prvky rovnaké hodnoty, potom ten nižšie v kóde HTML bude navrchu. Okrem toho prvok, ktorý má číselnú hodnotu (vrátane 0), vytvára novú úroveň usporiadania pre svoje umiestnené podriadené položky.
• auto- s touto hodnotou má prvok v aktuálnej úrovni usporiadania rovnaký z-index ako jeho predchodca, ktorý vytvoril túto úroveň. Samotný prvok však nevytvára novú úroveň usporiadania pre svojich potomkov. Ak existuje niekoľko prvkov s danou hodnotou, potom ten, ktorý sa zobrazí nižšie v kóde HTML stránky, bude navrchu.
• dediť- zdedí hodnotu z-indexu z rodičovského prvku.

Percentuálny údaj: neexistuje.

Predvolená hodnota: auto.

Keďže vo vnútri prvku, ktorý vytvára úroveň usporiadania, môžu byť nielen umiestnené prvky, ale aj niektoré ďalšie, prehliadače používajú určité pravidlá na ich vrstvenie v rámci danej úrovne:

1. Prvá vrstva obsahuje pozadie a rám prvku, ktorý vytvoril túto úroveň usporiadania.
2. Navrchu, v druhej vrstve, sú podradené prvky, ktoré majú záporné hodnoty z-indexu, pričom prvok s hodnotou bližšou k nule sa nachádza vyššie.
3. Ďalšou vrstvou sú podradené prvky, ktoré nie sú zabudované (inline).
4. Štvrtú vrstvu tvoria plávajúce prvky (float) spolu s ich obsahom.
5. Piatou vrstvou sú zabudované podradené prvky.
6. Šiesta vrstva obsahuje prvky so z-indexom auto alebo 0, pričom prvok nižšie v kóde je vyšší.
7. Nakoniec prvky s kladnými hodnotami z-indexu sú úplne hore, pričom prvok s vyššou hodnotou je vyšší.

Syntax

z-index: auto | číslo | dediť

Príklad CSS: Použitie z-indexu

Výsledok.

CSS verzie

Prehliadače

Internet Explorer 6.0 a 7.0 nerozumejú hodnote zdedenia. Aj v týchto prehliadačoch sa vytvárajú nové úrovne usporiadania všetkými umiestnenými prvkami, nielen prvkami s číselnými hodnotami z-indexu.

IE 6.0 vždy umiestni prvok navrchu všetkých prvkov stránky bez ohľadu na hodnoty z-indexu.

Firefox 2.0 ukladá prvky so zápornými hodnotami z-indexu pod pozadie a okraj prvku, ktorý vytvoril túto úroveň usporiadania. Inými slovami, obracia body 1 a 2 v pravidlách vrstvenia.

Dnešná lekcia, podobne ako tá včerajšia, vám povie o polohovaní v CSS, ako aj o veľmi zaujímavej vlastnosti zvanej z-index.

Pomocou tejto vlastnosti môžete umiestňovať bloky textu (a nielen textu) na seba, pričom získate niečo ako 3D efekt.

Táto lekcia bude veľmi užitočná pre začiatočníkov vo webdizajne, keďže sa okrem teoretických informácií pozrieme aj na praktický príklad.

Pre prehľadnosť si pozrite dva obrázky nižšie:

"Relatívna poloha"

"Absolútna poloha"

Ako vidíte, pri relatívnom umiestnení je blok s textom umiestnený vo vzťahu k odseku s textom. Keď je absolútna - vo vzťahu k oknu prehliadača.

Činnosť tejto vlastnosti je najjednoduchšie vysvetliť pomocou obrázka:

Prvok s vyššou hodnotou bude umiestnený vyššie.

Teraz sa pozrime bližšie na naše demo.

Vytvorenie 1. bloku

Vrstva 1

#vrstva1 (
pozadie:#707070;
farba:#fff;
poloha:relatívna;
šírka: 800px;
výška: 450px;
}

Pomocou štýlov dávame tomuto bloku relatívne umiestnenie. Vďaka tomu môžeme dovnútra umiestniť ďalšie bloky.

Vytvorenie 2. bloku

Analogicky s 1. blokom vytvoríme blok. Tento blok sa líši iba svojim identifikátorom (id="layer2").

Vrstva 2

Lorem Ipsum je jednoducho fiktívny text tlače a sadzby
priemyslu. Lorem Ipsum je štandardný fiktívny text v tomto odvetví
už od roku 1500, keď neznáma tlačiareň vzala galéru písma
a premiešal ju, aby vytvoril typovú vzorkovnicu. To sa nezachovalo
iba päť storočí, ale aj skok do elektronickej sadzby,
zostávajú v podstate nezmenené. Spopularizovaný bol v 60. rokoch 20. storočia
s vydaním listov Letraset obsahujúcich pasáže Lorem Ipsum,
a nedávno so softvérom na publikovanie na počítači, ako je Aldus
PageMaker vrátane verzií Lorem Ipsum.

#vrstva2 (
pozadie:#f9ad81;
farba:#fff;
poloha:absolútna;
top:40px;
left:50px;
šírka: 400px;
výška: 400px;
z-index:1;
}

Druhému bloku dávame absolútne umiestnenie. Teraz bude určite vnútri toho prvého a nikam nepôjde. Okrem toho definujeme atribút z-index (=1). To znamená, že blok č.2 bude umiestnený nad prvým.

Vytvorenie 3. bloku

Vrstva 3

Lorem Ipsum je jednoducho fiktívny text tlače a sadzby
priemyslu. Lorem Ipsum je štandardný fiktívny text v tomto odvetví
už od roku 1500, keď neznáma tlačiareň vzala galéru písma
a premiešal ju, aby vytvoril typovú vzorkovnicu. To sa nezachovalo
iba päť storočí, ale aj skok do elektronickej sadzby,
zostávajú v podstate nezmenené. Spopularizovaný bol v 60. rokoch 20. storočia
s vydaním listov Letraset obsahujúcich pasáže Lorem Ipsum,
a nedávno so softvérom na publikovanie na počítači, ako je Aldus
PageMaker vrátane verzií Lorem Ipsum.

#vrstva3 (
pozadie:#6dcff6;
farba:#fff;
poloha:absolútna;
top:80px;
vľavo:100px;
šírka: 600px;
výška:200px;
z-index:2;
}

V tomto bloku z-index = 2.

Môžete skúsiť vymeniť blokové indexy a uvidíte výsledok.

Pamätajte, že prvok s nižším z-indexom bude vždy pod prvkom s vyšším. To znamená, že bloku č. 1 môžete priradiť index = 999 a bloku č. 2 - 1000. Výsledok bude rovnaký.

To je na dnes všetko! Ďakujem za pozornosť!

Stručná informácia

CSS verzie

CSS 1	CSS 2	CSS 2.1	CSS 3

Popis

Akékoľvek umiestnené prvky na webovej stránke môžu byť naskladané na seba v určitom poradí, čím sa simuluje tretí rozmer kolmý na obrazovku. Každý prvok môže byť buď pod alebo nad inými objektmi na webovej stránke, ich umiestnenie pozdĺž osi z riadi z-index . Táto vlastnosť funguje len pre prvky, ktorých hodnota polohy je absolútna, pevná alebo relatívna.

Syntax

z-index: číslo | auto | dediť

hodnoty

Ako hodnoty sa používajú celé čísla (kladné, záporné a nulové). Čím je hodnota vyššia, tým je prvok vyšší v porovnaní s prvkami, ktoré majú nižšiu hodnotu. Ak je hodnota z-index rovnaká, prvok v popredí je ten, ktorý je opísaný nižšie v kóde HTML. Hoci špecifikácia umožňuje použitie záporných hodnôt z-indexu, takéto prvky sa nezobrazujú prehliadač Firefox do verzie 2.0 vrátane.

Okrem číselné hodnoty používa sa auto - poradie prvkov sa v tomto prípade vytvára automaticky na základe ich pozície v kóde HTML a ich príslušnosti k rodičovi, keďže podradené prvky majú rovnaký počet ako ich nadradený prvok. Hodnota zdediť označuje, že je zdedená od rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

Vrstva 1 navrchu

Vrstva 1

Vrstva 2

Vrstva 4 navrchu

Vrstva 3

Vrstva 4

Výsledok tohto príkladu je znázornený na obr. 1.

Ryža. 1. Použitie vlastnosti z-index

Objektový model

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

Prehliadače

Zoznam vytvorený pomocou značky

, V internetový prehliadač Explorer 6 sa vždy zobrazuje nad ostatnými prvkami bez ohľadu na hodnotu z-indexu.

Verzie programu Internet Explorer do 7.0 vrátane nepodporujú hodnotu zdedenia a interpretujú auto ako 0.

Vo verziách prehliadača Firefox do 2.0 vrátane záporná hodnota z-index umiestni prvok pod pozadie webovej stránky a jej obsahu.

Problém so z-indexom je, že veľa ľudí jednoducho nechápe, ako to funguje.
Všetko popísané nižšie je v špecifikácii W3C. Žiaľ, nie každý to číta.

Popis problému:

Nižšie je uvedený HTML kód so základným dizajnom CSS.

Úloha: uistite sa, že červená je za modrou a zelenou bez toho, aby ste porušili niektoré z nasledujúcich pravidiel:

• Značenie HTML nemôžete zmeniť
• K prvkom nemôžete meniť/pridávať z-index
• Nie je možné meniť/pridávať umiestnenie prvkov

Riešenie:

Hmm, niečo tu nesedí. Čo s tým má spoločné transparentnosť? Ako môže ovplyvniť poradie prekrývajúcich sa prvkov? Myslíte si to isté? Vitajte v klube!
Dúfam, že v druhej časti článku všetko padne na svoje miesto.

Poradie prekrývajúcich prvkov:

Akýkoľvek prvok v HTML dokument môže byť buď v popredí alebo v pozadí. Každý to vie. Pravidlá, ktoré definujú toto poradie, sú jasne popísané v špecifikácii, no, ako som uviedol vyššie, nie každý im plne rozumie.

Ak vlastnosti z-index a umiestnenie nie sú nastavené explicitne, všetko je jednoduché: poradie ukladania sa rovná poradiu prvkov v HTML. (V skutočnosti je to trochu zložitejšie, ale pokiaľ nepoužívate záporné hodnoty výplne na prekrytie vložených prvkov, nenarazíte na okrajové prípady)

Ak explicitne určíte umiestnenie pre prvky (a ich potomkov), tieto prvky budú prekrývať prvky bez explicitnej vlastnosti umiestnenia. (Keď hovorím „explicitne špecifikujte umiestnenie“, mám na mysli akúkoľvek inú hodnotu ako statickú, napríklad: absolútnu alebo relatívnu).

A nakoniec prípad, keď je daný z-index. Na začiatok je prirodzené predpokladať, že prvky s veľkým z-indexom budú nad prvkami s menším z-indexom a akýkoľvek prvok s množinou z-indexov bude nad prvkom bez množiny z-indexov, ale toto nie je tento prípad. Po prvé, z-index sa berie do úvahy iba na explicitne umiestnených prvkoch. Ak sa pokúsite nastaviť z-index na neumiestnenom prvku, nič sa nestane. Po druhé, hodnoty z-indexu môžu vytvárať kontexty prekrytia. Hmm, veci sa skomplikovali, však?

Kontext prekrytia

Každý kontext prekrytia má svoj vlastný koreňový prvok v štruktúre HTML. V momente, keď sa na prvku vytvorí nový kontext, všetky podradené prvky tiež spadajú do tohto kontextu a zaujmú svoje miesto v poradí prekrytí. Ak je prvok umiestnený na úplnom spodku jedného prekryvného kontextu, neexistuje žiadny spôsob, ako by sa mohol zobraziť nad iným prvkom v susednom prekryvnom kontexte vyššie v hierarchii, dokonca aj s z-indexom nastaveným na milión.

Nový kontext sa môže vytvoriť v týchto prípadoch:

• Ak je prvok koreňovým prvkom dokumentu (prvkom)
  Ak prvok nie je staticky umiestnený a jeho hodnota z-indexu nie je automatická
  Ak má prvok nepriehľadnosť menšiu ako 1

Problém so z-indexom je, že veľa ľudí jednoducho nechápe, ako to funguje.
Všetko popísané nižšie je v špecifikácii W3C. Žiaľ, nie každý to číta.

Popis problému:

Nižšie je uvedený HTML kód so základným dizajnom CSS.

Úloha: uistite sa, že červená je za modrou a zelenou bez toho, aby ste porušili niektoré z nasledujúcich pravidiel:

• Značenie HTML nemôžete zmeniť
• K prvkom nemôžete meniť/pridávať z-index
• Nie je možné meniť/pridávať umiestnenie prvkov

Riešenie:

Hmm, niečo tu nesedí. Čo s tým má spoločné transparentnosť? Ako môže ovplyvniť poradie prekrývajúcich sa prvkov? Myslíte si to isté? Vitajte v klube!
Dúfam, že v druhej časti článku všetko padne na svoje miesto.

Poradie prekrývajúcich prvkov:

Akýkoľvek prvok v dokumente HTML môže byť v popredí alebo na pozadí. Každý to vie. Pravidlá, ktoré definujú toto poradie, sú jasne popísané v špecifikácii, no, ako som uviedol vyššie, nie každý im plne rozumie.

Ak vlastnosti z-index a umiestnenie nie sú nastavené explicitne, všetko je jednoduché: poradie ukladania sa rovná poradiu prvkov v HTML. (V skutočnosti je to trochu zložitejšie, ale pokiaľ nepoužívate záporné hodnoty výplne na prekrytie vložených prvkov, nenarazíte na okrajové prípady)

Ak explicitne určíte umiestnenie pre prvky (a ich potomkov), tieto prvky budú prekrývať prvky bez explicitnej vlastnosti umiestnenia. (Keď hovorím „explicitne špecifikujte umiestnenie“, mám na mysli akúkoľvek inú hodnotu ako statickú, napríklad: absolútnu alebo relatívnu).

A nakoniec prípad, keď je daný z-index. Na začiatok je prirodzené predpokladať, že prvky s veľkým z-indexom budú nad prvkami s menším z-indexom a akýkoľvek prvok s množinou z-indexov bude nad prvkom bez množiny z-indexov, ale toto nie je tento prípad. Po prvé, z-index sa berie do úvahy iba na explicitne umiestnených prvkoch. Ak sa pokúsite nastaviť z-index na neumiestnenom prvku, nič sa nestane. Po druhé, hodnoty z-indexu môžu vytvárať kontexty prekrytia. Hmm, veci sa skomplikovali, však?

Kontext prekrytia

Každý kontext prekrytia má svoj vlastný koreňový prvok v štruktúre HTML. V momente, keď sa na prvku vytvorí nový kontext, všetky podradené prvky tiež spadajú do tohto kontextu a zaujmú svoje miesto v poradí prekrytí. Ak je prvok umiestnený na úplnom spodku jedného prekryvného kontextu, neexistuje žiadny spôsob, ako by sa mohol zobraziť nad iným prvkom v susednom prekryvnom kontexte vyššie v hierarchii, dokonca aj s z-indexom nastaveným na milión.

Nový kontext sa môže vytvoriť v týchto prípadoch:

• Ak je prvok koreňovým prvkom dokumentu (prvkom)
  Ak prvok nie je staticky umiestnený a jeho hodnota z-indexu nie je automatická
  Ak má prvok nepriehľadnosť menšiu ako 1