pravidlo CSS z-index - poloha prvku stránky v súradnici Z: úroveň zobrazenia prvku alebo vrstvy, v ktorej je umiestnená. Tag, ktorý z-index sa zobrazí úplne. Značky sa zobrazujú v poradí ich sledovania vo vstupnom toku a navzájom sa prekrývajú. Hodnota z-indexu určuje prioritu viditeľnosti.
Musíme vzdať hold moderným prehliadačom a algoritmom zobrazovania prvkov. Od okamihu, kedy grafika zachytila obrazovky a problém orezávania viditeľných a neviditeľných častí prvkov v okne aplikácie, technológia zobrazovania viditeľného obsahu dosiahla vynikajúce výsledky. V okne prehliadača sa všetky položky zobrazujú nesprávne, používateľ vidí iba to, čo definuje dizajn alebo vývojár.
Všeobecné pravidlo: poradie a úroveň
Vstupný tok (stránka vygenerovaná serverom) číta prehliadač postupne. Všetky značky sú zobrazené v súlade s pravidlami CSS a môžu sa prekrývať.
V tomto príklade sú opísané štyri viditeľné prvky. Každá nasledujúca je nadradená predchádzajúcemu. V miestach, kde sa značky prekrývajú, vzniká prioritná otázka. Keďže pravidlo z-index CSS vo všetkých týchto značkách je rovnaké a rovnaké 848, potom bude viditeľný prvok, ktorý bude viditeľný. Zdá sa, že všetko, čo vyzerá pod každým ďalším prvkom.
Pravidlo viditeľnosti
Prehliadače dodržiavajú pravidlo výlučne "čestne". Prísť s algoritmom, ktorý vám umožní veľkoobchodné analyzovať všetky prekrytia a použiť len tie, ktoréskutočne pretínajú bez zohľadnenia tých oblastí, ktoré sú absorbované každým z nasledujúcich prvkov - je to veľmi ťažké.
Vo väčšine prípadov to nie je potrebné. Moderné zariadenie funguje veľmi rýchlo a je veľmi problematické si všimnúť premaľovanie prvku, kým nebude zablokované ďalším prvkom.
Vplyv na sekvenciu prvkov
V tretej značke scCSS3 stačí zvýšiť hodnotu z-indexu a v scCSS4 ju zmenšiť pri zmene celkového obrazu. V tomto prípade zostáva sekvencia umiestnenia prvkov v prúde rovnaká:
div id = 'scCSS1';
div id = 'scCSS2';
div id = "scCSS3";
div id = "scCSS4".
Treba poznamenať, že druhý obrázok zaberá viac priestoru, než sa zdá. Tretí obrázok tiež. Okrem toho sa skladá z dvoch častí (dve vajcia), ktoré sú vzdialené od seba.
Skutočné rozmery oblastí, ktoré zaberajú druhý a tretí obraz, sú zvýraznené žltou a šedou.
Kombinácia z-indexu s farbou pozadia
Treba poznamenať, že vlastnosti pozadia CSS & amp; z-index sa navzájom dopĺňajú. Všetky blokové prvky, rovnako ako všetky ostatné, vždy zaberajú obdĺžnikovú plochu, ktorá je tvorená maximálnou výškou a maximálnou šírkou obsahu.
Pomocou obrázka môžete poskytnúť akýkoľvek tvar oblasti prvku, ale okolo neho bude vždy obdĺžnik. Je to fakt, ktorý je dôležité správne zohľadniť. Môžete umiestniť text pozdĺž obrysu zvoleného tvaru, ale ak to neurobíte, obsah spadá do ľubovoľného prvku, ako pravouhlýbox a dôsledne ako vstup zo vstupného prúdu. Použitie vlastnosti CSS z-index prvku, ktorého background-color priehľadná hmota (druh transparentnosti) vám umožní napodobniť akékoľvek obvodu prvok. Hoci v každom prípade v skutočnosti bude prvok pravouhlý.
Udalosti a viditeľnosť položky
V miestach, kde je nejaký prvok zakrytá iným prvkom pre prípad, že nebude fungovať. Všeobecným pravidlom je, ak je položka mimo dohľadu, je tiež mimo dosahu.
V prípade, že developer chce zamknúť tlačidlá alebo položky menu, môže sa dať na iné blokované tag tag moc priehľadný (napríklad pomocou CSS krytie), ale v každom prípade má vyššiu CSS z-index. Od udalostí z užívateľského hľadiska, možno rozdeliť na tie, ktoré by nemalo záležať, druhý (pohybovať myšou náhodným stlačením tlačidla na časovači klávesnice signálu) môže byť použitá primerane upraviť obsah v okne prehliadača. Jednoduchý príklad: návštevník presunutý myšou nad položku menu, ale ešte nerozhodli nič robiť. Developer by predvídať udalosť sledovať pohyb k dialógu požadovaného bodu (kliknutím - návštevník rozhodne) a odráža primeraný obsah. Pravidlo z-indexu CSS nie je pre to najvhodnejšie.
Formát obrazu
Keďže obraz je dôležitým stavebným materiálom pre akékoľvek miesto (krása, modernosť, funkčnosť - je už obvyklým pravidlom vecí), výber formátu je dôležitý preobrazmi. Vo všeobecnosti môžete použiť celý rad existujúcich formátov, ale pokiaľ ide o praktickosť a účinnosť, je rozumné obmedziť * .png na statické obrázky a * .gif - pre animované obrázky. Populárna * .jpg je tiež dobrá, ale neumožňuje flexibilne manipulovať s obrazovkou.
Chyby prehliadačov a vývojárov
Z-index CSS nefunguje tak často, ale stane sa to. Pravidlá kaskádového štýlu vždy fungujú a objem štýlového súboru často dosahuje značné objemy. Ak niečo nie je v poriadku, alebo jednoducho nemusí byť, musíte skontrolovať vlastný kód, potom vyčistiť vyrovnávaciu pamäť prehliadača a skontrolovať svoj vlastný kód.
Tlmočenie HTML a CSS, prehliadač takmer nepovoľuje chyby - to je axióm. Ak nie je žiadny požadovaný prvok, potom v návrhu CSS {position: absolute; z-index: 112233; vľavo: 10px; top: 20px; } niečo chybné alebo nesprávne napísané. Najčastejšou chybou sú nesprávne zadané súradnice prvku, chýba indikácia jeho viditeľnosti, absolútna alebo relatívna poloha. Niekedy sprievodca štýlom môže pracovať priamo na prvku, nie v jeho štýle. V druhom prípade to je cesta von zo situácie, ale to predovšetkým hovorí o nejakej chybe v kóde. Štýl musí byť špecifikovaný v štýle triedy alebo identifikátora. Určite štýl prvku iba vo výnimočných prípadoch. Použitie jQuery.css (z-index, 123) môže tiež viesť k chybe, ak sa neuplatňuje na triedu alebo kód. Navyše, jQuery je naozaj skvelý nástroj pre vývojárov.Pred aplikáciou to však nebráni tomu, aby ste premýšľali o nástrojoch HTML /CSS, z-index nie je pravidlo, ktoré si nevyžaduje veľkú pozornosť.
Správne vrstvy a logické posunutie
Ideálna strana je plochá. V každom prípade, na skutočný hromadný obraz vo veľkom meradle ďaleko, ale nie je žiadna osobitná potreba. Moderné stránky sú skutočnou praxou, reálnymi úlohami. Musia len pracovať, dobre, ploché zobrazujú hromadný obraz. Mimochodom, fenomén vstupných stránok (vstupná stránka), vo forme možnosti "pre bytovú výstavbu", - najlepším dôkazom, že plochý obdĺžnikový tvar a suché, ale veľmi jasne obsah - a až príliš dobre. Treba však poznamenať, že stránky monopolných spoločností zostali na ich mieste: hlavná vec - tvár spoločnosti, jej funkčnosť a výrobná kapacita. Príšery informačných technológií uznali, že vstupné stránky sú osobou malého podnikania, príslušenstva, herbalife a ďalších "bižutérií".
Či je to pravda alebo nie, budúcnosť sa prejaví. Je dôležité, aby v ľubovoľnom variante budovania staveniska bolo rozumné nielen usporiadať obsah, ale aj zabezpečiť správny pohyb medzi nimi. Perfektným riešením je AJAX (stránka sa podľa potreby aktualizuje). Ešte sľubnejšie riešenie, keď stránka zobrazuje to, čo je potrebné v tomto okamihu v okne prehliadača.
V podstate je z-index jednoduché pravidlo CSS. Jeho účelom je zobraziť úroveň značky tak, aby prehliadač mohol určiť, kedy sa má zobraziť prvok a ktorá časť tohto elementu budeviditeľné. Vrstva a stránka sú veľmi relatívne koncepty, pretože je problematické navrhnúť stránku a pamätať si na hodnotu pravidiel z-indexu pre rôzne možnosti zobrazenia.
Vývojár zvyčajne vyberie obľúbené číslo a dáva mu všetky značky v rade a tí, ktorí potrebujú nejako vyčnievať, priradia ďalšie číslo. Dávať hodnotu vrstvám a úrovni stránky nie je zvlášť progresívna a sľubná prax. Ak však sémantiku z-indexu presuniete do dialógu s návštevníkom, môžete vytvoriť praktický efekt. Rovnako ako sa tagy môžu vzájomne prekrývať, môžete im uložiť dialógy (stránky návštevníkov) a pohybovať sa medzi nimi. Z tohto hľadiska sa zdá, že uplatňovanie pravidla z-indexu CSS je veľmi rozumné a praktické.
