› › Html tag je prázdná buňka tabulky. Atributy ALIGN a VALIGN. Uralská státní pedagogická univerzita

Html tag je prázdná buňka tabulky. Atributy ALIGN a VALIGN. Uralská státní pedagogická univerzita

Většina vlastností CSS je poměrně snadno použitelná. Použití vlastnosti CSS na prvek ve vašem označení často přinese okamžité výsledky – jakmile obnovíte stránku, použije se sada hodnot vlastnosti a okamžitě uvidíte výsledek. Ostatní vlastnosti CSS jsou však složitější a budou fungovat pouze po nastavení konkrétní sady podmínek.

Vlastnost z-index patří do poslední skupiny vlastností. Tato vlastnost způsobila rozšířený zmatek a frustraci častěji než jakákoli jiná existující vlastnost CSS. Ironií však je, když poznáte z-index, zjistíte, že tato nemovitost je velmi jednoduchá a nabízí účinná metodařešení mnoha problémů s uspořádáním.

V tomto článku se dozvíte, co je to z-index, jak může být nesprávně interpretován a některé příklady jeho použití. Navíc se dozvíte některé rozdíly v chování prohlížečů při manipulaci s vlastností z-index, to se týká především předchozí verze Internet Explorer a Firefox. Tento podrobná recenze z-index poskytne vývojářům vynikající základ pro sebevědomé a efektivní používání této vlastnosti.

Co je to?

Vlastnictví z-index definuje úroveň zásobníku prvku HTML. "Úroveň zásobníku" odkazuje na polohu prvku na ose Z (směrově kolmo k ose X nebo ose Y). Prvek, který je přiřazen nejvíce skvělá hodnota z-index bude umístěn úplně nahoře v zásobníku vrstev. Tento stoh vrstev je umístěn kolmo k obrazovce nebo oblasti zobrazení.

3D pohled na osu Z:

Abych ukázal, jak to funguje z-index, obrázek nahoře mírně zvětšuje zobrazení prvků zásobníku vzhledem k výřezu.

Normální pořadí zásobníku

Na stránce HTML je normální pořadí zásobníku (tj. pořadí prvků na ose Z) určeno řadou faktorů. Následuje seznam ukazující pořadí, ve kterém jsou prvky naskládány, počínaje zdola. V tomto seznamu nejsou žádné prvky s přiřazenou vlastností z-index:

  • Pozadí a ohraničení prvku, který vytváří kontext zásobníku
  • Prvky s negativním kontextem zásobníku, v pořadí vzhledu
  • Není umístěn, neplovoucí, blokový prvek s, v pořadí vzhledu
  • Neumístěné, plovoucí prvky, v pořadí vzhledu
  • Vložené prvky v pořadí vzhledu
  • Umístěné prvky v pořadí vzhledu

Pokud je vlastnost z-index použita správně, může změnit normální pořadí zásobníku.

Pořadí prvků ve stohu samozřejmě není tak jasné, pokud jsou prvky umístěny tak, aby se vzájemně překrývaly. Chcete-li tedy zobrazit normální pořadí zásobníku, můžete použít záporné marže jak je uvedeno níže:

Šedý blok

Modrý blok

Hnědý blok

Výše uvedené bloky jsou přiřazeny odlišně barva pozadí a barva ohraničení a posledním dvěma blokům je specificky přiřazena záporná horní výplň pro ilustraci normálního pořadí skládání. Šedý blok se objeví jako první v rozvržení, modrý blok jako druhý a hnědý blok jako třetí. Přiřazené záporné marže tuto skutečnost dokonale demonstrují. Tyto prvky nemají přiřazené žádné hodnoty z-index, jsou umístěny na stránce v obvyklém pořadí nebo standardně. Vzájemně se překrývají díky záporným maržím.

Proč je tam zmatek?

Ačkoli z-index není složitá vlastnost na pochopení, pokud je nesprávně interpretována, může být pro začínající vývojáře matoucí. K této mylné představě dochází, protože vlastnost z-index bude fungovat pouze u prvku, který má vlastnost position nastavenou na jednu ze tří hodnot: absolutní, opraveno nebo relativní.

Abychom demonstrovali, že z-index funguje pouze na polohovaných prvcích, zde jsou stejné tři bloky spolu s hodnotami z-indexu použitými ke změně normálního pořadí vrstev:

Šedý blok

Modrý blok

Hnědý blok

Šedý blok má hodnotu z-indexu nastavenou na „9999“; modrý blok má hodnotu z-indexu nastavenou na „500“; a hnědého bloku je hodnota z-indexu nastavena na „1“. Bylo by logické předpokládat, že pořadí, ve kterém jsou bloky naskládány, by se mělo změnit. To se ale v v tomto příkladu protože žádný z těchto prvků nemá přiřazenou vlastnost position.

Zde jsou stejné bloky, ale s relativní vlastností position: přidanou ke každému z nich a dříve přiřazenými vlastnostmi z-index:

Šedý blok

Modrý blok

Hnědý blok

Nyní jsme dostali požadovaný výsledek: Pořadí prvků se změnilo; šedý blok překrývá modrý a modrý zase překrývá hnědý.

Syntax

Vlastnost z-index může ovlivnit pořadí vrstev, jak blokových, tak i blokových inline prvky a nastavuje se přiřazením kladné nebo záporné, celého čísla nebo automatické hodnoty. Hodnota auto dává prvku stejné pořadí vrstev jako jeho rodičovský prvek.

Takto vypadá kód CSS pro třetí příklad, kde je správně použita vlastnost z-index:

#grey_box ( šířka: 200px; výška: 200px; okraj: plný 1px #ccc; pozadí: #ddd; pozice: relativní; z-index: 9999; ) #blue_box ( šířka: 200px; výška: 200px; rám: plný 1px # 4a7497; pozadí: #8daac3; pozice: relativní; z-index: 500;

Opět stojí za to znovu připomenout, zejména pro začínající vývojáře, že vlastnost z-index nebude fungovat, dokud na prvek nepoužijete umístění.

Pomocí JavaScriptu

Pokud chcete dynamicky změnit hodnotu z-indexu prvku, pomocí pomocí JavaScriptu, pak je to celkem jednoduché. Syntaxe je stejná jako pro přístup k většině vlastností CSS, stačí nahradit vlastnosti CSS s pomlčkou kódem, jak je uvedeno níže:

Var myElement = document.getElementById("gold_box"); myElement.style.position = "relativní"; myElement.style.zIndex = "9999";

Jak je ukázáno v příkladu, vlastnost CSS "z-index" je zapsána jako "zIndex". Podobně se „barva pozadí“ změní na „barva pozadí“, „tloušťka písma“ se změní na „hmotnost písma“ a tak dále.

Pomocí výše uvedeného kódu se také změní vlastnost position, protože z-index bude fungovat pouze na polohovaném prvku.

Nesprávná manipulace v IE a Firefoxu

Za určitých okolností může být v některých prohlížečích s vlastností z-index zacházeno jinak, to platí pro Internetový prohlížeč Průzkumník verze 6 a 7, stejně jako verze Firefoxu 2.

Prvky se vždy zobrazí úplně nahoře v pořadí vrstev, čímž naruší normální pořadí, hodnoty umístění nebo z-index. Tento problém je znázorněn na obrázku níže:

Živel , což se děje u každého aktuální prohlížeče kromě IE6:

– Vyberte rok – 2009 2010 2011

Hnědý blok

Pokud se podíváte na tento příklad pomocí prohlížeče IE6, uvidíte, že prvek . Existují dvě řešení tohoto problému. Prvním je dočasné skrytí prvku pomocí JavaScriptu