z-index

CSS vlastnost z-index definuje pořadí prvků, když se při umístění navzájem překrývají. To znamená, že jej můžete použít k určení, který prvek (vrstva) bude nahoře a který (a v jakém pořadí) bude pod ním.

Ale není to tak jednoduché. Tato vlastnost je jednou z mála v CSS, která provádí dvě zcela odlišné funkce najednou (jako je pozice):

1. Vlastnost z-index se používá k uspořádání umístěných prvků.
2. Každý prvek se z-indexem, který se nerovná automatickému vytvoření nová úroveňřazení, vůči němuž se (řazení) vyskytuje u všech jeho potomků (potomci, jejichž z-index není roven auto, si přirozeně již vytvářejí svou vlastní úroveň řazení). To je důvod, proč například prvek z jedné úrovně uspořádání nemůže být „umístěn“ mezi dva prvky z jiné.
3. Kořenový prvek vytvoří kořenovou úroveň řazení, i když nemá zadaný z-index.

Podívejme se na tento příklad:

V tomto příkladu pro jakékoli hodnoty z-indexu budete moci zaměnit pouze DIV3 a DIV4. Ale následující nebude fungovat:

1. DIV3 a DIV4 nebude možné vložit pod DIV2, protože jsou zapnuté různé úrovně objednávání. DIV2 je na úrovni vytvořené prvkem DIV1 a DIV3 a DIV4 jsou na úrovni vytvořené prvkem DIV2. Aby byly na stejné úrovni, musíte odstranit z-index z DIV2 nebo jej nastavit na auto .
2. Nebude fungovat umístit DIV2 pod DIV1. Aby to fungovalo, musíte nastavit auto již na DIV1.
3. A tak dále...

V různých učebnicích a referenčních knihách se pojem „úroveň objednávky“ nazývá odlišně – místní poziční kontext, místní zásobníkový kontext atd. V oficiální specifikaci CSS je to napsáno jako „místní kontext skládání“. Ale podle mého názoru je fráze „úroveň uspořádání“ blíže k pochopení pro většinu rusky mluvících lidí, a proto jsem zavedl tuto definici.

Typ nemovitosti

Účel: polohování.

Platí pro: prvky s jinou než statickou polohou.

Zděděno: ne.

Hodnoty

Hodnota vlastnosti z-index je určit pořadí prvků jedním z následujících způsobů.

• Číslo- jakékoli kladné nebo záporné celé číslo, které určuje pořadí prvků v rámci dané úrovně uspořádání. Prvek s vyšší hodnotou bude umístěn nad prvky s nižší hodnotou. Pokud mají dva prvky stejné hodnoty, pak ten níže v kódu HTML bude nahoře. Navíc prvek, který má číselnou hodnotu (včetně 0), vytváří novou úroveň řazení pro své umístěné potomky.
• auto- s touto hodnotou má prvek v aktuální úrovni řazení stejný z-index jako jeho předchůdce, který vytvořil tuto úroveň. Samotný prvek však nevytváří novou úroveň řazení pro své potomky. Pokud existuje několik prvků s danou hodnotou, pak ten, který se objeví níže v kódu HTML stránky, bude nahoře.
• zdědit- zdědí hodnotu z-indexu z rodičovského prvku.

Procentuální zadání: neexistuje.

Výchozí hodnota: auto.

Protože uvnitř prvku, který vytváří úroveň řazení, mohou být nejen umístěné prvky, ale i některé další, používají prohlížeče určitá pravidla pro jejich vrstvení v rámci dané úrovně:

1. První vrstva obsahuje pozadí a rám prvku, který vytvořil tuto úroveň řazení.
2. Nahoře, ve druhé vrstvě, jsou podřízené prvky, které mají záporné hodnoty z-indexu, kde prvek s hodnotou blíže nule je umístěn výše.
3. Další vrstvou jsou potomkové prvky, které nejsou vestavěné (inline).
4. Čtvrtou vrstvu tvoří plovoucí prvky (float) spolu s jejich obsahem.
5. Pátá vrstva jsou vestavěné podřízené prvky.
6. Šestá vrstva obsahuje prvky s z-index auto nebo 0, kde prvek níže v kódu je vyšší.
7. Konečně prvky s kladnými hodnotami z-indexu jsou úplně nahoře, přičemž prvek s vyšší hodnotou je vyšší.

Syntax

z-index: auto | číslo | zdědit

Příklad CSS: Použití z-indexu

Výsledek.

CSS verze

Prohlížeče

Internet Explorer 6.0 a 7.0 nerozumí hodnotě dědění. Také v těchto prohlížečích jsou nové úrovně řazení vytvářeny všemi umístěnými prvky, nejen těmi s číselnými hodnotami z-indexu.

IE 6.0 vždy umístí prvek nad všemi prvky stránky, bez ohledu na hodnoty z-indexu.

Firefox 2.0 shromažďuje prvky se zápornými hodnotami z-indexu pod pozadím a okrajem prvku, který vytvořil tuto úroveň uspořádání. Jinými slovy, obrací body 1 a 2 v pravidlech vrstvení.

Dnešní lekce, stejně jako ta včerejší, vám poví o pozicování v CSS a také o velmi zajímavé vlastnosti zvané z-index.

Pomocí této vlastnosti můžete umisťovat bloky textu (a nejen text) na sebe a přitom získat něco jako 3D efekt.

Tato lekce bude velmi užitečná pro začátečníky v oblasti webdesignu, protože kromě teoretických informací se podíváme také na praktický příklad.

Pro přehlednost se podívejte na dva obrázky níže:

"Relativní umístění"

"Absolutní umístění"

Jak vidíte, při relativním umístění je blok s textem umístěn ve vztahu k odstavci s textem. Když absolutní - ve vztahu k oknu prohlížeče.

Činnost této vlastnosti je nejjednodušší vysvětlit pomocí obrázku:

Prvek s vyšší hodnotou bude umístěn výše.

Nyní se podívejme blíže na naše demo.

Vytvoření 1. bloku

Vrstva 1

#vrstva1 (
pozadí:#707070;
barva:#fff;
poloha:relativní;
šířka:800px;
výška:450px;
}

Pomocí stylů dáváme tomuto bloku relativní umístění. Díky tomu můžeme dovnitř umístit další bloky.

Vytvoření 2. bloku

Analogicky s 1. blokem vytvoříme blok. Tento blok se liší pouze svým identifikátorem (id="layer2").

Vrstva 2

Lorem Ipsum je prostě fiktivní text tisku a sazby
průmysl. Lorem Ipsum je standardní fiktivní text v tomto odvětví
již od roku 1500, kdy neznámý tiskař vzal galéru písma
a zakódoval to, aby vytvořil typovou vzorovou knihu. To se nezachovalo
pouhých pět století, ale také skok do elektronické sazby,
zůstávají v podstatě nezměněny. Popularizovala se v 60. letech 20. století
s vydáním listů Letraset obsahujících pasáže Lorem Ipsum,
a v poslední době se softwarem pro publikování na počítači, jako je Aldus
PageMaker včetně verzí Lorem Ipsum.

#vrstva2 (
pozadí:#f9ad81;
barva:#fff;
poloha:absolutní;
nahoře:40px;
vlevo:50px;
šířka:400px;
výška:400px;
z-index:1;
}

Druhému bloku dáváme absolutní umístění. Teď bude určitě uvnitř toho prvního a nikam nepůjde. Kromě toho definujeme atribut z-index (=1). To znamená, že blok č. 2 bude umístěn nad prvním.

Vytvoření 3. bloku

Vrstva 3

Lorem Ipsum je prostě fiktivní text tisku a sazby
průmysl. Lorem Ipsum je standardní fiktivní text v tomto odvětví
již od roku 1500, kdy neznámý tiskař vzal galéru písma
a zakódoval to, aby vytvořil typovou vzorovou knihu. To se nezachovalo
pouhých pět století, ale také skok do elektronické sazby,
zůstávají v podstatě nezměněny. Popularizovala se v 60. letech 20. století
s vydáním listů Letraset obsahujících pasáže Lorem Ipsum,
a v poslední době se softwarem pro publikování na počítači, jako je Aldus
PageMaker včetně verzí Lorem Ipsum.

#vrstva3 (
pozadí:#6dcff6;
barva:#fff;
poloha:absolutní;
nahoře:80px;
vlevo:100px;
šířka:600px;
výška:200px;
z-index:2;
}

V tomto bloku z-index = 2.

Můžete zkusit vyměnit blokové indexy a uvidíte výsledek.

Pamatujte, že prvek s nižším z-indexem bude vždy pod prvkem s vyšším indexem. To znamená, že bloku č. 1 můžete dát index = 999 a bloku č. 2 - 1000. Výsledek bude stejný.

To je pro dnešek vše! Děkuji za pozornost!

Stručné informace

CSS verze

CSS 1	CSS 2	CSS 2.1	CSS 3

Popis

Jakékoli umístěné prvky na webové stránce lze naskládat na sebe v určitém pořadí, čímž se simuluje třetí rozměr kolmý k obrazovce. Každý prvek může být buď pod nebo nad jinými objekty na webové stránce, jejich umístění podél osy z je řízeno z-indexem . Tato vlastnost funguje pouze pro prvky, jejichž hodnota pozice je absolutní, pevná nebo relativní.

Syntax

z-index: číslo | auto | zdědit

Hodnoty

Jako hodnoty se používají celá čísla (kladná, záporná a nula). Čím vyšší hodnota, tím vyšší je prvek ve srovnání s prvky, které mají hodnotu nižší. Pokud je hodnota z-index rovna, prvek v popředí je ten, který je popsán níže v kódu HTML. Ačkoli specifikace umožňuje použití záporných hodnot z-indexu, takové prvky se v něm nezobrazují Prohlížeč Firefox až do verze 2.0 včetně.

Kromě číselné hodnoty používá se auto - pořadí prvků je v tomto případě sestaveno automaticky na základě jejich pozice v HTML kódu a jejich příslušnosti k nadřazenému prvku, protože podřízené prvky mají stejný počet jako jejich nadřazený prvek. Hodnota dědit označuje, že je zděděna od rodiče.

HTML5 CSS2.1 IE Cr Op Sa Fx

Vrstva 1 nahoře

Vrstva 1

Vrstva 2

Vrstva 4 nahoře

Vrstva 3

Vrstva 4

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Použití vlastnosti z-index

Objektový model

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

Prohlížeče

Seznam vytvořený pomocí tagu

, V Internetový prohlížeč Explorer 6 se vždy zobrazuje nad ostatními prvky, bez ohledu na hodnotu z-indexu.

Internet Explorer verze do 7.0 včetně nepodporují dědičnou hodnotu a interpretují auto jako 0.

Ve verzích prohlížeče Firefox až do 2.0 včetně záporná hodnota z-index umístí prvek pod pozadí webové stránky a jejího obsahu.

Problém z-indexu je v tom, že mnoho lidí jednoduše nechápe, jak to funguje.
Vše popsané níže je ve specifikaci W3C. Bohužel ne všichni to čtou.

Popis problému:

Níže je uveden HTML kód se základním CSS designem.

Úkol: ujistěte se, že červená je za modrou a zelenou, aniž byste porušili některá z následujících pravidel:

• Značení HTML nelze změnit
• K prvkům nelze měnit/přidávat z-index
• Nemůžete měnit/přidávat umístění prvků

Řešení:

Hmm, tady je něco špatně. Co s tím má společného transparentnost? Jak může ovlivnit pořadí překrývajících se prvků? Myslíte si totéž? Vítejte v klubu!
Doufám, že v druhé části článku vše zapadne.

Pořadí překrývajících prvků:

Jakýkoli prvek v HTML dokument může být buď v popředí, nebo v pozadí. To ví každý. Pravidla, která toto pořadí definují, jsou jasně popsána ve specifikaci, ale jak jsem uvedl výše, ne každý jim plně rozumí.

Pokud vlastnosti z-index a positioning nejsou nastaveny explicitně, je vše jednoduché: pořadí překrývání se rovná pořadí prvků v HTML. (Ve skutečnosti je to trochu složitější, ale pokud nepoužijete záporné hodnoty výplně k překrytí vložených prvků, nenarazíte na okrajové případy)

Pokud explicitně určíte umístění pro prvky (a jejich potomky), pak takové prvky budou překrývat prvky bez explicitní vlastnosti umístění. (Když říkám „explicitně specifikujte umístění“, mám na mysli jakoukoli jinou hodnotu než statickou, například: absolutní nebo relativní).

A nakonec případ, kdy je uveden z-index. Pro začátek je přirozené předpokládat, že prvky s velkým z-indexem budou nad prvky s menším z-indexem a jakýkoli prvek se sadou z-indexů bude nad prvkem bez sady z-indexů, ale toto není tomu tak. Za prvé, z-index se bere v úvahu pouze u explicitně umístěných prvků. Pokud se pokusíte nastavit z-index na neumístěném prvku, nic se nestane. Za druhé, hodnoty z-indexu mohou vytvářet překryvné kontexty. Hmm, věci se hodně zkomplikovaly, že?

Překryvný kontext

Každý překryvný kontext má svůj vlastní kořenový prvek ve struktuře HTML. V okamžiku, kdy se na prvku vytvoří nový kontext, všechny podřízené prvky také spadají do tohoto kontextu a zaujmou své místo v pořadí překrytí. Pokud je prvek umístěn úplně dole v kontextu jednoho překryvu, neexistuje žádný způsob, jak ho sakra zobrazit nad jiným prvkem v sousedním kontextu překryvu výše v hierarchii, i když je z-index nastavený na milion.

Nový kontext lze vytvořit v následujících případech:

• Pokud je prvek kořenovým prvkem dokumentu (prvkem)
  Pokud prvek není staticky umístěn a jeho hodnota z-indexu není automatická
  Pokud má prvek neprůhlednost menší než 1

Problém z-indexu je v tom, že mnoho lidí jednoduše nechápe, jak to funguje.
Vše popsané níže je ve specifikaci W3C. Bohužel ne všichni to čtou.

Popis problému:

Níže je uveden HTML kód se základním CSS designem.

Úkol: ujistěte se, že červená je za modrou a zelenou, aniž byste porušili některá z následujících pravidel:

• Značení HTML nelze změnit
• K prvkům nelze měnit/přidávat z-index
• Nemůžete měnit/přidávat umístění prvků

Řešení:

Hmm, tady je něco špatně. Co s tím má společného transparentnost? Jak může ovlivnit pořadí překrývajících se prvků? Myslíte si totéž? Vítejte v klubu!
Doufám, že v druhé části článku vše zapadne.

Pořadí překrývajících prvků:

Jakýkoli prvek v dokumentu HTML může být popředí nebo pozadí. To ví každý. Pravidla, která toto pořadí definují, jsou jasně popsána ve specifikaci, ale jak jsem uvedl výše, ne každý jim plně rozumí.

Pokud vlastnosti z-index a positioning nejsou nastaveny explicitně, je vše jednoduché: pořadí překrývání se rovná pořadí prvků v HTML. (Ve skutečnosti je to trochu složitější, ale pokud nepoužijete záporné hodnoty výplně k překrytí vložených prvků, nenarazíte na okrajové případy)

Pokud explicitně určíte umístění pro prvky (a jejich potomky), pak takové prvky budou překrývat prvky bez explicitní vlastnosti umístění. (Když říkám „explicitně specifikujte umístění“, mám na mysli jakoukoli jinou hodnotu než statickou, například: absolutní nebo relativní).

A nakonec případ, kdy je uveden z-index. Pro začátek je přirozené předpokládat, že prvky s velkým z-indexem budou nad prvky s menším z-indexem a jakýkoli prvek se sadou z-indexů bude nad prvkem bez sady z-indexů, ale toto není tomu tak. Za prvé, z-index se bere v úvahu pouze u explicitně umístěných prvků. Pokud se pokusíte nastavit z-index na neumístěném prvku, nic se nestane. Za druhé, hodnoty z-indexu mohou vytvářet překryvné kontexty. Hmm, věci se hodně zkomplikovaly, že?

Překryvný kontext

Každý překryvný kontext má svůj vlastní kořenový prvek ve struktuře HTML. V okamžiku, kdy se na prvku vytvoří nový kontext, všechny podřízené prvky také spadají do tohoto kontextu a zaujmou své místo v pořadí překrytí. Pokud je prvek umístěn úplně dole v kontextu jednoho překryvu, neexistuje žádný způsob, jak ho sakra zobrazit nad jiným prvkem v sousedním kontextu překryvu výše v hierarchii, i když je z-index nastavený na milion.

Nový kontext lze vytvořit v následujících případech:

• Pokud je prvek kořenovým prvkem dokumentu (prvkem)
  Pokud prvek není staticky umístěn a jeho hodnota z-indexu není automatická
  Pokud má prvek neprůhlednost menší než 1