CSS z-index: přehled, vlastnosti

CSS pravidlo z-index - pozice prvku stránkyZ souřadnice: úroveň zobrazení prvku nebo vrstvy, ve které je umístěn. Značka se z-indexem více se zobrazí úplně. Značky se zobrazují v pořadí, v jakém se objevují v příchozím streamu, a vzájemně se překrývají. Hodnota z-indexu určuje prioritní viditelnost.

Musíme vzdávat hold moderním prohlížečům aalgoritmy zobrazování prvků. Od okamžiku, kdy grafika získala obrazovky a problém odstranění viditelných a neviditelných částí prvků v oknech aplikací, zobrazovací technologie viditelného obsahu dosáhla vynikajících výsledků. V okně prohlížeče jsou všechny prvky zobrazeny správně, uživatel vidí pouze to, co určuje návrh nebo vývojář.

Obecné pravidlo: pořadí a úroveň

Vstupní proud (stránka vygenerovaná serverem) čte prohlížeč postupně. Všechny značky se zobrazují podle pravidel CSS a mohou se navzájem překrývat.

Tento příklad popisuje čtyři viditelné prvky. Každé následující překrývá předchozí. Na místech, kde se protínají značky, nastává otázka priority. Vzhledem k tomu, že pravidlo CSS z indexu CSS pro všechny tyto značky je stejné a rovná se 848, další prvek bude viditelný. Všechno, co vypadá pod každým dalším prvkem, zřejmě.

Pravidlo viditelnosti

Prohlížeče splňují pravidlo viditelnostivýjimečně "upřímný". Je velmi obtížné přijít s algoritmem, podle kterého můžete velkoobchodně analyzovat všechny překryvy a aplikovat pouze ty, které skutečně protínají bez ohledu na ty oblasti, které jsou absorbovány každým dalším prvkem.

Ve většině případů to není nutné. Moderní zařízení pracuje velmi rychle a je velmi problematické zaznamenat překreslení prvku, dokud se jeho další prvek nepřekrývají.

Účinky na posloupnost prvků

Stačí, aby třetí značka scCSS3 zvýšila hodnotu z-indexu a pro scCSS4 - snížit její změnu. V tomto případě zůstává posloupnost následujících prvků ve streamu stejná:

• div id ="scCSS1";
• div id ="scCSS2";
• div id ="scCSS3";
• div id ="scCSS4".

Je třeba poznamenat, že druhýobrázek skutečně zaberá více prostoru než vypadá. Třetí obrázek. Navíc se skládá ze dvou částí (dvě vejce), umístěných ve vzdálenosti od sebe.

Skutečné rozměry oblastí obsazených druhým a třetím obrazem jsou zvýrazněny žlutou a šedou.

Kombinace z-indexu s barvou pozadí

Vezměte prosím na vědomí vlastnosti CSSbackground & z-index se navzájem doplňují. Všechny blokové prvky a všechny ostatní vždy zaujímají pravoúhlý prostor tvořený maximální výškou a maximální šířkou obsahu.

S využitím obrázků můžete dát určitý tvar oblasti prvku, ale kolem něj bude vždy obdélník. To je fakt, který je důležité správně zvážit.

Text můžete umístit na vybraný obrysčísel, ale pokud to není provedeno, obsah spadá do jakéhokoli prvku, jako v obdélníkové krabici, a postupně, jak to přijde ze vstupního toku.

Použití vlastností CSS z-indexu na prvekkterá barva pozadí je průhledná (druh průhlednosti) umožňuje napodobit jakýkoli obrys prvku. Ačkoli v každém případě bude ve skutečnosti prvek pravoúhlý.

Prvky událostí a viditelnost

V místech, kde je prvek blokován jiným prvkem, události na něm nebudou fungovat. Obecně platí, že pokud je položka mimo dohled, je mimo dosah.

Pokud chce vývojář zamknout tlačítko neboprvku nabídky, může místo tagu zablokování umístit jinou značku, případně průhlednou (například pomocí pravidla opacity CSS), ale v každém případě má vyšší CSS z-index.

Od událostí z uživatelského boduz hlediska mohou být rozděleny do smysluplných a nemají takový, druhý (pohyb myši, náhodné stisknutí tlačítka na klávesnici, časový signál) lze použít k přiměřenému změně obsahu v okně prohlížeče.

Jednoduchý příklad: Návštěvník přesunul ukazatel myši na položku nabídky, ale dosud se nerozhodl. Vývojář by mohl zajistit tuto událost, sledovat pohyb do požadovaného bodu dialogu (kliknutím - návštěvník rozhodne) a zobrazit odpovídající obsah. Pravidlo z-index CSS je pro tento případ nejvhodnější.

Formát obrázku

Protože obrázky jsou důležitéstavební materiál pro jakékoliv místo (krása, modernita, funkčnost - již obvyklá norma věcí), výběr formátu pro obrazy má velký význam.

Většinou můžete použít všechnyrůzné existující formáty, ale z hlediska praktické a efektivní je docela rozumné omezit * .png pro statické obrázky a * .gif pro animované obrázky. Populární * .jpg je také dobré, ale neumožňuje flexibilitu manipulovat s displejem.

Chyby prohlížeče a vývojáře

Často se jedná o CSSz-index nefunguje, ale stane se. Pravidla kaskádových stylů vždy fungují a velikost souboru stylů často dosahuje značného množství. Pokud je něco špatně nebo jednoduše neexistuje nic, měli byste nejprve zkontrolovat svůj vlastní kód, poté vymazat mezipaměť prohlížeče a zkontrolovat znovu svůj vlastní kód.

Interpretace HTML a CSS, prohlížeč je téměřdělat chyby je axiom. Není-li nutný prvek, znamená to, že v konstrukci CSS {pozice: absolutní; z-index: 112233; vlevo: 10px; horní: 20px; ...} něco chybí nebo je napsáno špatně.

Nejčastější chyba je nesprávně zadána.souřadnice souřadnicového prvku, vynechána indikace jeho viditelnosti, absolutní nebo relativní poloha. Někdy může pracovat na určení stylu přímo na prvek a nikoliv ve stylu. V druhém případě je to způsob, jak vyjít ze situace, ale to nejprve naznačuje nějaký druh chyby v kódu.

Styl musí být zadán ve stylu třídy nebo identifikátoru. Styl by měl být uveden na prvek pouze ve výjimečných případech.

Pomocí jQuery.css (z-index, 123) může také vést k chybě, pokud se použije na nesprávnou třídu nebo identifikátor. Kromě toho je jQuery opravdu skvělý vývojářský nástroj. Nicméně před aplikací to není bolest přemýšlet: je to možné udělat s improvizovanými prostředky HTML / CSS, z-index není pravidlo, které nepotřebuje pozornost.

Správné vrstvy a logický pohyb

Dokonalá stránka je plochá. V každém případě je to zdaleka ne skutečný objemový obraz v masivním měřítku a není pro ni žádnou zvláštní potřeba. Moderní webové stránky jsou skutečnou praxí, reálnými úkoly. Musí prostě pracovat, ale ploché ukazují trojrozměrný obraz.

Mimochodem, fenomén vstupních stránek (přistánístránka) ve formě verze webu - nejlepší potvrzení, že ploché obdélníkové tvary a suchý, ale extrémně čistý obsah jsou také dobré a praktické. Mělo by však být poznamenáno, že místa monopolních společností zůstávají s jejich: hlavní věcí je tvář společnosti, její funkčnost a výrobní síla. Monstra informačních technologií se domnívala, že vstupní stránky jsou tváří malých podniků, příslušenství, Herbalife a dalších "šperků".

Líbí se nebo ne, ve skutečnosti,bude ukazovat budoucnost. Je důležité, aby v jakékoliv variantě stavby mělo smysl nejen natírat obsah ve vrstvách, ale také zajistit správný pohyb mezi nimi.

Vynikajícím řešením je AJAX (stránka je podle potřeby aktualizována). Ještě slibnějším řešením je, když stránka ukazuje, co je v daném okně prohlížeče potřebné.

Ve skutečnosti je z-index jednoduchým pravidlem CSS. Jeho účelem je ukázat úroveň značky tak, aby prohlížeč mohl určit, kdy má být prvek zobrazen a která část prvku bude viditelná. Vrstva a stránka jsou velmi relativní pojmy, protože je problematické navrhnout stránku a mít na paměti hodnoty pravidla z-indexu pro různé možnosti zobrazení obsahu.

Obvykle si vývojář vybírá oblíbené číslo a dávájeho všechny tagy v řadě a ti, kteří potřebují nějak vyčnívat, přidělují následující číslo. Přidělit důležitost vrstvám a úrovním stránky není zvláště progresivní a slibná praxe.

Pokud však sémantiku z-indexu přenesetedialog s návštěvníkem, můžete vytvořit praktický efekt. Stejným způsobem, jak se tagy mohou překrývat, můžete překrýt dialogy (návštěvníci stránek) a pohybovat se mezi nimi. Z tohoto pohledu je použití pravidla CSS z-indexu velmi rozumné a praktické.