Domov › Nastavení › Vlastnost z-index: podrobný přehled. Jak funguje z-index

Vlastnost z-index: podrobný přehled. Jak funguje z-index

Od autora: Vítejte v naší sérii výukových programů CSS od A do Z! V této sérii vám řeknu o hodnotách a vlastnostech CSS začínajících různými písmeny abecedy. Někdy návod nestačí a v tomto článku vám dám pár rychlých tipů na práci s vlastností z-index.

Celý video tutoriál a jeho textovou verzi o vlastnosti z-index si můžete prohlédnout na odkazu.

Z znamená z-index

Jak můžete očekávat, poslední článek v sérii bude celý věnován vlastnosti z-index.

Jak bylo zmíněno ve výukovém videu, vlastnost z-index řídí pořadí vrstev v dokumentu. Existuje několik složitých problémů spojených s kontextem zásobníku, které byly diskutovány ve výukovém videu, ale obecně má vlastnost z-index spíše omezenou funkčnost.

z-index funguje pouze na umístěných prvcích

Pokud potřebujete změnit pořadí vrstev na prvcích, můžete to udělat pomocí vlastnosti z-index. Tato vlastnost však bude fungovat pouze s prvky, které mají vlastnost pozice nastavenou na absolutní, relativní nebo pevnou.

Přesné umístění prvků je zásadní při vytváření složitých rozvržení a zajímavých vzorů rozhraní, ale všichni chceme mít možnost měnit pořadí vrstev, aniž bychom museli přesouvat prvek z jeho původní pozice na stránce.

Pokud potřebujete pouze změnit pořadí vrstev, můžete jednoduše nastavit vlastnost position na relativní a vynechat horní, pravou, spodní nebo levou. Prvek zůstane na svém místě, nenaruší se struktura dokumentu a vlastnost z-index bude fungovat, jak má.

Ve vlastnosti z-index můžete zadat záporné hodnoty

Vrstvy se často používají k vytváření složitých geometrických tvarů nebo komponent uživatelského rozhraní. Toto vrstvení zahrnuje umístění prvků nad sebou s neustále rostoucí hodnotou z-indexu. Chcete-li posunout prvek o úroveň níže, jednoduše zadejte nižší hodnotu z-indexu, ale tato vlastnost přijímá i záporné hodnoty.

Záporné hodnoty lze použít s pseudoprvky k jejich umístění za obsah nadřazeného prvku.

Chcete-li umístit pseudoprvky :before nebo after pod text nadřazeného prvku, musíte zadat zápornou hodnotu. Takto funguje zásobník.

Podívejte se na ukázku CodePen níže, můžete si pohrát s různými hodnotami z-indexu.

Použijte 100 jako přírůstek pro z-index

Při práci se z-indexem není obvyklé psát kód takto:

Modální (z-index: 99999; )

modální (

z-index: 99999;

Bolí mě pohled na tento kód. Věci se ještě zhorší, když přidáte! důležité. Takový kód je známkou toho, že vývojář nerozumí kontextu zásobníku a snaží se vnutit jednu vrstvu přes druhou.

Namísto použití libovolných čísel jako 9999, 53 nebo 12 můžeme systematizovat naši stupnici z-indexu a dát ji do pořádku. A není to proto, že bych byl vývojář s obsedantně-kompulzivní poruchou. Upřímně řečeno.

Jako přírůstek pro z-index nepoužívám jednomístné číslo, ale 100.

Vrstva-jedna (z-index: 100;).vrstva-2 (z-index: 200;).vrstva-tři (z-index: 300;)

Tento ruční přístup k vytvoření systému z-index je velmi robustní, ale může se stát ještě flexibilnějším, když je spárován s preprocesorem, jako je Sass.

To je vše, přátelé. Toto byl poslední článek ze série CSS od A do Z! Doufáme, že se vám to líbilo a dozvěděli jste se hodně o vlastnostech CSS.

Ve skutečnosti jsou prvky v dokumentu HTML generovány ve třech rozměrech. Kromě přichycení k osám X a Y je lze umístit také podél osy Z. K tomu musí mít prvek relativní pozici CSS nebo jiné hodnoty pro tuto sadu vlastností:

Vlastnosti jako margin , float a offset určují, kde bude prvek umístěn na osách x a y, zatímco vlastnost z-index určuje, kde bude umístěn na ose z.

vlastnost z-index

Tato vlastnost umožňuje definovat:

Umístění aktuálního prvku na zásobníku;
Zda aktuální prvek definuje nový překryvný kontext ( úroveň stohování).

Tato vlastnost se vztahuje pouze na prvky s nastaveným umístěním. To znamená, že vlastnost position prvku musí být nastavena na relativní , absolutní nebo pevná . Vlastnost z-index má tři hodnoty:

Příklad kódu

z-index: auto | | zdědit

Úroveň zásobníku (pořadí zobrazení prvků)

Tato hodnota přesně určuje, kde na ose Z se prvek nachází. Čím vyšší číslo, tím výše bude prvek v zásobníku a směrem k „povrchu“ obrazovky:

Pokud vlastnost z-index není specifikována, bude úroveň prvku v zásobníku nastavena v souladu s pořadím, ve kterém je umístěn ve stromu dokumentu. Prvky, které jsou specifikovány později v kódu, budou mít ve výchozím nastavení vyšší pozici zásobníku.

Vypočítejte pozici na hromádce

Kromě vlastnosti z-index je relativní pozice CSS prvku v zásobníku ovlivněna také několika faktory. Prvky jsou na stohu uspořádány v následujícím pořadí:

Pozice	Popis	CSS kód
1 (dole)	Prvek tvoří kontext překrytí.	z-index:
2	Podřízené prvky se zápornou úrovní zásobníku.	z-index:
3	Podřízené prvky s In-flow, nevnořeným stylem nebo bez sady umístění.	zobrazení: /* není vloženo */ poloha: statická
4	Plovoucí podřízené prvky bez nastavení polohy.	plovák: vlevo \| že jo poloha: statická
5	Podřízené prvky s vloženým stylem In-flow nebo bez nastaveného umístění.	displej: /* inline */ poloha: statická
6	Podřízené prvky s úrovní zásobníku 0.	z-index: auto \| 0 pozice: relativní \| absolutní \| pevný
7 (nahoře)	Dětské prvky s kladnou úrovní zásobníku.	z-index: pozice: relativní \| absolutní \| pevný

Kontext skládání

Při zadávání relativní pozice CSS z indexu ji ne vždy definujeme vzhledem ke všem ostatním prvkům na stránce. Úroveň zásobníku prvku odráží pouze jeho pozici v konkrétním kontextu překrytí.

To může vést k situaci, kdy prvek s vyšší hodnotou z-indexu nebude „nahoře“ nad prvkem s nižší hodnotou.

Kontext překrytí lze vysvětlit následujícími pravidly:

1. Původní překryvný kontext je obsažen v kořenovém prvku

Počáteční kontext překryvu v jakémkoli dokumentu HTML je obsažen v kořenovém prvku . Dokud nebudou vytvořeny nové kontexty, úroveň prvků v zásobníku bude výchozí pro všechny prvky na stránce.

2. Vytvořte nové kontexty se zadanou vlastností z-index

Nový kontext překryvu vytvoříme nastavením vlastnosti z-index prvku na libovolné celé číslo. To umožňuje zadat úroveň aktuálního prvku v zásobníku jako celé číslo a také vytvořit nový kontext překrytí.

Následně bude nový kontext aplikován na všechny podřízené prvky tohoto prvku. Jejich úroveň je nyní indikována pouze v daném kontextu a nevztahuje se na kořenový prvek.

V níže uvedeném příkladu je .foo v překryvném kontextu 1 a .bar je v překryvném kontextu 2:

3. Prvky nelze umístit nad nebo pod nadřazenou úroveň

Pokud má nadřazený prvek nastaven relativní z index pozice CSS, pak všechny podřízené prvky nemohou být umístěny nad nebo pod touto úrovní ( v kontextu překryvného prvku nadřazeného prvku). V níže uvedeném příkladu, i když má .bar vyšší z-index než .baz , prvek je stále umístěn „pod“ ním. Je to proto, že v kontextu 1 nemůže být .bar umístěn nad nebo pod úrovní 1.

CSS
.foo ( z-index: 1; )
.bar ( z-index: 1000; )
.baz ( z-index: 2; )

Překlad článku „Jak funguje z-index“ připravil přátelský projektový tým.

Dobrý špatný

Tento článek bude hovořit o tom, jak přenést vrstvu nebo prvek do popředí/pozadí v HTML pomocí CSS. Přesněji pomocí vlastnosti z-index.

S největší pravděpodobností každý z vás v dětství vyráběl nášivky. Jedná se o proces, kdy na papír lepíte různé prvky – domy, stromy, mraky a podobně. Ukáže se něco jako 3-D obrázek, kde je každý prvek, pak jen vrstva, nalepen na druhý. Všechny jsou nalepeny na list papíru.

HTML pomocí CSS umožňuje získat podobný obrázek, pouze na webové stránce. Každý z prvků lze v případě potřeby nalepit na ostatní.

Kdy to může být potřeba? Pokud si rádi hrajete s pozicí a pozicí vzhledem k obrazovce, může se stát, že se jeden prvek překryje s druhým, ale uzavřený prvek musíte přesunout dopředu. Často bez definování prvků na pozadí/popředí je obtížné implementovat tu či onu věc z návrhu, který nevymyslel programátor, ale designér. Obecně je rozsah této nemovitosti velmi široký a je omezen pouze vaší představivostí.

První věc, kterou je třeba si zapamatovat, je, že z-index nefunguje, pokud prvek nemá vlastnost position nastavenou na absolutní , relativní nebo pevnou . To je ten případ, protože budete muset překrývat, a tedy umístit je na různé úrovně vrstev, pouze pokud začnete překrývat jeden prvek s druhým kvůli pozici a bottom , top , left , right . Toto však není jediný případ, kdy může být nutné umístění z-indexu. Prvky se mohou navzájem překrývat pomocí záporných hodnot marže a dalších metod.

Pokud nezadáte z-index, pak je výchozí hodnota 0 pro všechny prvky. z-index může nabývat kladných i záporných celočíselných hodnot. V případě výchozí hodnoty se budou prvky vzájemně překrývat podle toho, čím dále je prvek v kódu zapsán, tím bude více popředí (v Demo ukázce č. 1).

Takto může vypadat kód CSS stylu pro 3:

s daným z-indexem , takže jsou uspořádány podle principu než první

v kódu, zejména proto, že je v popředí (oproti výchozímu principu), toto je příklad č. 2 v ukázce:

div (position: absolute; text-align:center; font-weight:bold;) div.first (width:100px; height:100px; background:#006600; left:0; top:50px; z-index:2; ) div.first2 (šířka:100px; výška:100px; pozadí:#990000; vlevo:50px; nahoře:100px; z-index:1;) div.first3 (šířka:100px; výška:100px; pozadí:#99FF66; vlevo:100px nahoře:150px; z-index:0;)

Je důležité pochopit, že prohlížeč bude porovnávat pouze z-index prvků umístěných na stejné úrovni vnoření, a i když má vnitřní prvek větší z-index než prvky umístěné na stejné úrovni jako jeho rodič, bude zobrazeny na pozadí vzhledem k nim (v

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:

Řekněme tedy, že máme HTML kód sestávající ze 3 prvků.
Každá z nich v sobě obsahuje jednu. A každý má zase své vlastní pozadí: červené, zelené a modré. Navíc je každý z nich umístěn absolutně u levého horního okraje dokumentu tak, že mírně překrývá ten vedle něj. První má z-index rovný 1, další dva nemají nastaven z-index.

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

Červené

Zelená

Modrý

.červená, .zelená, .modrá ( pozice: absolutní; ) .červená ( pozadí: červená; z-index: 1; ) .zelená ( pozadí: zelená; ) .modrá ( pozadí: modrá; )
Příklad na jsfiddle

Ú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í:

Řešením je přidat o něco méně než jednu průhlednost k první (rodič červené).
Zde je css ilustrující toto:
div:first-child ( neprůhlednost: 0,99; )

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ítej v klubu!
Doufám, že v druhé části článku vše zapadne.

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

Z-index se zdá velmi jednoduchý: čím vyšší hodnota, tím blíže nám bude prvek, tzn. prvek se z-indexem 5 bude překrývat prvek se z-indexem 2, že? Spíš ne.
Toto je problém z-indexu. Všechno se zdá tak zřejmé, že většina vývojářů nevěnuje studiu této problematiky dostatek času.

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

Prvky se společnými rodiči, které se společně přesouvají do popředí nebo na pozadí, se nazývají překryvný kontext. Pochopení kontextu překrývání je klíčem k pochopení z-indexu a pořadí překrývání prvků.

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

Vlastnost z-index řídí pořadí aplikace umístěné prvky, když se navzájem překrývají. Vlastnost přijímá kladné a záporné celočíselné hodnoty.

V normálním toku jsou statické prvky position: umístěny postupně jeden po druhém v pořadí, ve kterém jsou definovány v html dokumentu. Výchozí hodnota je z-index: auto; .

Rýže. 1. Umístění prvků podél osy Z

Vlastnost z-index určuje pořadí prvků podél osy Z Normálně prvky s vysokou hodnotou indexu překrývají prvky s nižší hodnotou a hodnotou auto a umístí je do popředí.

Rýže. 2. Vliv vlastnosti z-index na umístěné prvky

Překryvný kontext

Pokud vlastnosti z-index a pozice prvků nejsou explicitně nastaveny, kontext překrytí je pořadí, ve kterém se objevují ve zdrojovém kódu. Pokud prvky nemají zadaný z-index, prohlížeč vykreslí prvky na stránce v následujícím pořadí:

Kořenový prvek

Umístěné prvky v pořadí, v jakém se objevují ve zdrojovém kódu. Poslední bude umístěn v popředí.

Rýže. 3. Výchozí pořadí prvků ve 3D prostoru

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Jak je vidět z obrázku, prvek s pozicí: absolutní; je v popředí, následuje text, pod ním jsou plovoucí prvky s float: left; , neumístěné prvky bloku jsou umístěny na pozadí (vzhledem k tomu, že plovoucí a umístěné prvky jsou odstraněny z toku, neumístěné prvky na úrovni bloku je ignorují a jsou umístěny jeden po druhém v souladu s označením, takže prvek