CSS z-index: přehled, vlastnosti

Pravidlo CSS z-index - pozice prvku stránky v souřadnici Z: úroveň zobrazení prvku nebo vrstva, ve které je umístěn. Značka, která má více z-indexu, se zobrazí jako celek. Značky se zobrazují v pořadí, v jakém se objevují v příchozím vláknu, a navzájem se překrývají. Hodnota z-indexu určuje

Musíme vzít hold moderním prohlížečům a algoritmům pro zobrazování prvků. Od doby, kdy grafika zachytila ​​obrazovky a vznikl problém oříznutí viditelných a neviditelných částí prvků v aplikačních oknech, technologie zobrazení viditelného obsahu dosáhla vynikajících výsledků. V okně prohlížeče se všechny položky zobrazují správně, uživatel vidí pouze to, co definuje návrhář nebo vývojář.

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

Vstupní proud (stránka tvořená serverem) čte prohlížeč postupně. Všechny značky se zobrazují v souladu s pravidly CSS a mohou se překrývat.

V tomto příkladu jsou popsány čtyři viditelné položky. Každé další blokuje 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, je viditelný následující prvek. Všechno, co vypadá pod každým dalším prvkem, zřejmě.

Pravidlo viditelnosti

Prohlížeče dodržují pravidlo viditelnosti výlučně "upřímně". Chcete-li přijít s algoritmem, který umožňuje analyzovat veškeré hrubé uložení a používat pouze ty, které ve skutečnosti se protínají, s výjimkou těch částí, které jsou absorbovány po sobě jdoucími prvek - je velmi obtížné.

Ve většině případů to není nutné. Moderní zařízení pracuje velmi rychle a je velmi problematické zaznamenat překreslení prvku předtím, než ho nahradí další prvek.

Účinky na posloupnost prvků

Stačí, když třetí značka scCSS3 zvýší hodnotu z-indexu a scCSS4 ji zmenší, jak se změní obecný obraz. Sekvence prvků v proudu zůstává stejná:

• div id =`scCSS1`-
• div id =`scCSS2`-
• div id =`scCSS3`-
• div id =`scCSS4`.

Je třeba poznamenat, že druhý snímek skutečně zabírá více místa, než se zdá. 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í, které zaujímají druhý a třetí obraz, jsou zvýrazněny žlutou a šedou barvou.

Kombinace z-indexu s barvou pozadí

Vezměte prosím na vědomí, že vlastnosti pozadí CSS z-index se navzájem doplňují. Všechny blokové prvky a všechny ostatní prvky vždy zaujímají obdélníkový prostor tvořený maximální výškou a maximální šířkou obsahu.

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

Můžete umístit text na cestě zvolen tvar je, ale pokud ne, obsah se dostává do jakéhokoli prvku v obdélníkovém poli postupně, po obdržení vstupu.

Pomocí vlastností CSS z-indexu v elementu, který barva pozadí má hodnotu transparentní (druh průhlednosti), můžete emulovat libovolný obrys prvku. I když v každém případě ve skutečnosti bude prvek pravoúhlý.

Události a viditelnost prvků

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

Pokud chce vývojář uzamknout tlačítko nebo položku nabídky, může snadno umístit jinou značku nad blokovanou značku, možná průhlednou (například pomocí pravidla Opacita CSS), ale v každém případě mají vyšší CSS z-index.

Vzhledem k tomu, události, z uživatelského hlediska, lze rozdělit na relevantní a nemají žádné, pak poslední (pohybem myši, stiskem náhodné tlačítek na klávesnici, časovač signál) může být použita přiměřeně měnit obsah v okně prohlížeče.

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

Formát obrázku

Vzhledem k tomu, že obrázky jsou důležitým stavebním materiálem pro jakékoliv místo (krása, modernita, funkčnost je již obvyklou normou věcí), je velmi důležité zvolit formát obrazů.

Zkrátka a dobře, můžete použít celou řadu stávajících formátů, ale z hlediska praktičnosti a efektivity je docela rozumné omezit * .jpg pro statické obrázky a * .jpg - pro animované obrázky. Populární * .jpg je také dobré, ale nedovoluje vám flexibilně manipulovat s displejem.

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

Ne tak často existuje situace, kdy z-index CSS nefunguje, ale stane se to. Pravidla kaskádové tabulky stylů vždy fungují a objem souboru stylů často dosahuje významných objemů. Pokud se něco nezobrazí správně nebo prostě není to, co by mělo být, musíte nejprve zkontrolovat svůj vlastní kód, poté vymazat mezipaměť prohlížeče a zkontrolovat znovu svůj vlastní kód.

Tlumočení HTML a CSS, prohlížeč téměř nedělá chyby - je to axiom. Pokud není požadovaný prvek, pak v konstrukci CSS {pozice: absolutně- z-index: 112233-vlevo: 10px; horní: 20px; ...} něco chybí nebo je napsáno špatně.

Nejběžnější chyba - souřadnice prvku jsou nesprávné, chybí označení jeho viditelnosti, absolutní nebo relativní pozice. Někdy může být styl určen přímo na prvek, nikoliv ve stylu. V druhém případě je to způsob, jak vyjít ze situace, ale to především znamená chybu v kódu.

Styl musí být zadán ve stylu třídy nebo identifikátoru. Určete styl prvku pouze ve výjimečných případech.

Použití jQuery.css (z-index, 123) může také vést k chybě, není-li aplikován na třídy nebo identifikátor. Kromě toho je jQuery opravdu skvělý vývojářský nástroj. Nicméně předtím, než budete aplikovat, nebolí přemýšlet: je možné upustit od improvizované prostředky HTML / CSS, z-index - není pravidlem, že nevyžaduje okamžitou pozornost.

Správné vrstvy a logický pohyb

Ideální stránka je plochá. V každém případě je to daleko od skutečného objemu obrazu v masovém měřítku, a není tam žádná zvláštní potřeba. Moderní stránky jsou skutečnou praxí, reálnými úkoly. Musí prostě pracovat, ale ploché ukazují trojrozměrný obraz.

Mimochodem, fenomén vstupní stránky (Vstupní stránky) ve formě možnosti „pro bytovou výstavbu“, - nejlepším důkazem, že plochý obdélníkový tvar a suché, ale velmi přesný obsah - i 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í skutečností je tvář společnosti, její funkčnost a výrobní kapacita. Informační technologie Monsters pocit, že vstupní stránky - je to malé a střední podniky čelí, doplňky Herbalife a další „klenoty“.

Takže nebo ne, protože je to opravdu správné, budoucnost se projeví. Je důležité, aby při jakékoli verzi webu bylo rozumné nejen natírat vrstvy obsahu, ale také zajistit správný pohyb mezi nimi.

Dokonalým řešením je AJAX (stránka je podle potřeby aktualizována). Ještě slibnější řešení, 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 jaká část tohoto prvku bude viditelná. Vrstva a stránka jsou velmi relativní pojmy, protože je problematické vytvořit 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á ho všem značkám v řadě a ti, kteří potřebují nějak vyčnívat, přiřadí další číslo. Důležitost vrstev a úrovní stránek není zvláště progresivní a slibná praxe.

Pokud však sémantiku z-indexu přenesete do dialogové oblasti s návštěvníkem, můžete vytvořit praktický efekt. Stejně jako se mohou tagy překrývat, můžete překrýt dialogy (návštěvník) a provést pohyb mezi nimi. Z tohoto pohledu se zdá, že použití pravidla CSS z-indexu je velmi praktické a praktické.