Pravidlo CSS z-index - poloha prvku stránky v souřadnici Z: úroveň zobrazení prvku nebo vrstvy, ve které je umístěn. Tag, který z-index bude zobrazen úplně. Značky se zobrazují v pořadí jejich sledování ve vstupním proudu a vzájemně se překrývají. Hodnota z indexu určuje prioritu viditelnosti.
Musíme ocenit moderní prohlížeče a algoritmy pro zobrazování prvků. Od doby, kdy grafika zaznamenala obrazovky a problém oříznutí viditelných a neviditelných částí prvků v oknech aplikací, technologie zobrazení viditelného obsahu dosáhla vynikajících výsledků. V okně prohlížeče jsou všechny položky zobrazeny nesprávně, uživatel vidí pouze to, co je definováno projektem nebo vývojářem.
Obecné pravidlo: pořadí a úroveň
Vstupní proud (stránka vygenerovaná serverem) čte prohlížeč postupně. Všechny značky jsou zobrazeny v souladu s pravidly CSS a mohou se překrývat.
V tomto příkladu jsou popsány čtyři viditelné prvky. Každá další je naposledy umístěna na předchozí. Na místech, kde se tagy překrývají, vzniká prioritní otázka. Vzhledem k tomu, že pravidlo z-index CSS ve všech těchto značkách je stejné a stejné 848, bude viditelný prvek, který bude viditelný. Všechno, co vypadá pod každým dalším prvkem, se zdá.
Pravidlo viditelnosti
Prohlížeče dodržují pravidlo výlučně "upřímně". Chcete-li přijít s algoritmem, který vám umožní velkoobchodní analýzu všech překryvů a použít pouze ty, kteréskutečně protínají bez zohlednění těch oblastí, které jsou absorbovány každým z následujících prvků - je to velmi obtížné.
Ve většině případů to není nutné. Moderní zařízení funguje velmi rychle a je velmi problematické zaznamenat přetvoření prvku, dokud nebude blokován dalším prvkem.
Účinky na posloupnost prvků
Ve třetí značce scCSS3 stačí zvýšit hodnotu z-indexu a ve scCSS4 ji snížit, jak se celkový obraz změní. V tomto případě zůstává sekvence umístění prvků v proudu stejná:
div id = 'scCSS1';
div id = 'scCSS2';
div id = 'scCSS3';
div id = "scCSS4".
Mělo by být poznamenáno, že druhý obrázek zabírá více prostoru než se zdá. Také třetí obrázek. Navíc se skládá ze dvou částí (dvě vejce), které jsou od sebe od sebe vzdáleny.
Skutečné rozměry oblastí, které zaujímají druhý a třetí obraz, jsou zvýrazněny žlutě a šedě.
Kombinace z-indexu s barvou pozadí
Je třeba poznamenat, že vlastnosti pozadí CSS & amp; z-index se navzájem doplňují. Všechny blokové prvky, stejně jako všechny ostatní, vždy zaujímají pravoúhlý prostor tvořený maximální výškou a maximální šířkou obsahu.
Pomocí obrázku můžete poskytnout libovolný tvar oblasti prvku, ale kolem něj bude vždy obdélník. To je fakt, který je důležitý pro správné zohlednění. Text můžete umístit podél obrysu vybraného tvaru, ale pokud tak neučiníte, obsah spadá do libovolného prvku, jako je obdélníkbox a důsledně jako vstup ze vstupního proudu. Použití vlastností z-indexu CSS v prvku, jehož barva pozadí je průhledná (nějaká průhlednost), umožňuje emulovat jakýkoli obrys prvku. Přestože v každém případě bude ve skutečnosti 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ým pravidlem je, že je-li položka mimo dohled, je také mimo dosah.
V případě, že developer chce zamknout tlačítka nebo položky menu, může se dát na jiné blokované tag tag moc průhledný (například pomocí CSS krytí), ale v každém případě má vyšší CSS z-index. Od událostí z uživatelského hlediska, lze rozdělit na ty, které by nemělo záležet, druhý (pohybovat myší náhodným stisknutím tlačítka na časovači klávesnice signálu) může být použita přiměřeně upravit obsah v okně prohlížeče. Jednoduchý příklad: návštěvník přesunul ukazatel na položku nabídky, ale zatím se nerozhodl. Vývojář mohl tuto událost předvídat, sledovat pohyb na požadované místo v dialogu (klikněte - návštěvník rozhodne) a zobrazí odpovídající obsah. Pravidlo z-indexu CSS není pro to nejvhodnější.
Formát obrazu
Vzhledem k tomu, že obraz je důležitým stavebním materiálem pro jakékoli místo (krása, modernita, funkčnost - je již obvyklým pravidlem věcí), volba formátu je důležitá proobrázky Z velké části můžete použít celou řadu existujících formátů, ale pokud jde o praktičnost a účinnost, je rozumné omezit * .png na statické obrázky a * .gif - pro animované obrázky. Oblíbená * .jpg je také dobrá, ale nedovoluje vám pružně manipulovat s obrazovkou.
Chyby prohlížeče a vývojáře
Z-index CSS nefunguje tak často, ale stane se. Pravidla kaskádového stylu vždy fungují a objem stylistického souboru často dosahuje značných objemů. Pokud je něco špatně nebo prostě nemusí být, musíte nejprve zkontrolovat svůj vlastní kód, vyčistit mezipaměť prohlížeče a zkontrolovat svůj vlastní kód.
Tlumočení HTML a CSS, prohlížeč téměř neumožňuje chyby - to je axiom. Pokud neexistuje žádný požadovaný prvek, pak v návrhu CSS {position: absolute; z-index: 112233; vlevo: 10px; horní: 20px; } něco chybějící nebo napsané špatně. Nejčastější chybou jsou nesprávně zadané souřadnice prvku, chybějící označení jeho viditelnosti, absolutní nebo relativní pozice. Někdy průvodce stylu může pracovat přímo na prvku, ne ve stylu. V druhém případě je to cesta, která je mimo situaci, ale v první řadě se jedná o nějakou 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ě, pokud se nepoužije na třídu nebo kód. Kromě toho je jQuery opravdu skvělý vývojářský nástroj.Nicméně před aplikací to nebude bránit v přemýšlení o nástrojích HTML /CSS, z-index není pravidlem, které nevyžaduje velkou pozornost.
Správné vrstvy a logické posunutí
Ideální stránka je plochá. V každém případě, na skutečný hromadný obraz ve velkém měřítku daleko, ale není tam žádná zvláštní potřeba. Moderní stránky jsou skutečnou praxí, reálnými úkoly. Musí prostě pracovat, dobře, ploché zobrazí hromadný obraz. Mimochodem, fenomén vstupních stránek (vstupní stránka) ve formě možností "designu stránek" - což je nejlepší důkaz, ž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ůstala na jejich místě: hlavní věc - tvář společnosti, její funkčnost a výrobní kapacita. Monstery informačních technologií uznaly, že vstupní stránky jsou osobou malého podniku, příslušenství, herbalife a dalšími "kostýmními šperky".
Ať už je to pravda nebo ne, budoucnost se projeví. Je důležité, aby v každé variantě budování pozemků bylo rozumné nejen rozmístění obsahu, ale také zajištění správného pohybu 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 tomto okně potřebné.
V podstatě je z-index jednoduché pravidlo CSS. Jeho účelem je ukázat úroveň značky tak, aby prohlížeč mohl určit, kdy má být element zobrazen, a která část tohoto prvku budeviditelné. Vrstva a stránka jsou velmi relativní pojmy, protože je problematické navrhnout stránku a zachovat hodnotu z-indexového pravidla pro různé možnosti zobrazení.
Obvykle si vývojář vybírá oblíbené číslo a dává mu všechny tagy v řadě a ti, kteří potřebují nějak vyčnívat, přidělí další číslo. Poskytnout hodnotu vrstvám a úrovni stránky není zvláště progresivní a slibná praxe. Pokud však sémantiku z-indexu přesunete do dialogu s návštěvníkem, můžete vytvořit praktický efekt. Stejně jako tagy se mohou navzájem překrývat, můžete uložit dialogy (stránky návštěvníka) a pohybovat se mezi nimi. Z tohoto pohledu se zdá, že uplatnění pravidla z-indexu CSS je velmi rozumné a praktické.
