CSS z-index: prehľad, vlastnosti

Pravidlo CSS z-index - pozícia prvku stránky v súradnici Z: úroveň zobrazenia prvku alebo vrstva, v ktorej sa nachádza. Značka, ktorá má viac indexov z, sa zobrazí v plnom rozsahu. Značky sa zobrazujú v poradí, v akom sa zobrazujú v prichádzajúcom vlákne a prekrývajú sa. приоритет видимости. Hodnota z-indexu určuje prioritu viditeľnosti.

Je potrebné venovať hold moderným prehliadačom a algoritmom zobrazovania prvkov. Od okamihu, keď boli zachytené grafické obrazovky a problém orezania viditeľných a neviditeľných častí prvkov v oknách aplikácií, technológia zobrazovania viditeľného obsahu dosiahla vynikajúce výsledky. V okne prehliadača sa všetky prvky zobrazujú správne, používateľ vidí iba to, čo definuje dizajn alebo vývojár.

Všeobecné pravidlo: poriadok a úroveň

Vstupný tok (stránka vytvorená 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é ďalšie blokuje predchádzajúcu. V miestach, kde sa pretínajú značky, vzniká otázka priority. Keďže pravidlo CSS z indexu pre všetky tieto značky je rovnaké a rovná sa 848, prvok, ktorý nasleduje ďalej, je viditeľný. Všetko, čo vyzerá z každého ďalšieho prvku, zrejme.

Pravidlo viditeľnosti

Prehliadače dodržiavajú pravidlo viditeľnosti výlučne "čestne". Ak chcete zvážiť algoritmus, pomocou ktorého môžete hromadne analyzovať všetky vrstvy a aplikovať len tie, ktoré skutočne pretínajú bez zohľadnenia tých stránok, ktoré sú absorbované každým z nasledujúcich prvkov, je veľmi ťažké.

Vo väčšine prípadov to nie je potrebné. Moderné zariadenie pracuje veľmi rýchlo a je veľmi problematické si všimnúť prepracovanie prvku predtým, než ho pristúpi k ďalšiemu prvku.

Účinok na postupnosť prvkov

Stačí, aby tretia značka scCSS3 zvýšila hodnotu z-indexu a scCSS4 - aby ju zmenšila, keď sa zmenil všeobecný obraz. Postupnosť prvkov v prúde zostáva rovnaká:

• id= 'scCSS1'; ID div = 'scCSS1';
• id= 'scCSS2'; ID div = 'scCSS2';
• id= 'scCSS3'; ID div = 'scCSS3';
• id= 'scCSS4'. ID div = 'scCSS4'.

Treba poznamenať, že druhý obrázok skutočne zaberá viac miesta, než sa zdá. Tretí obrázok tiež. Okrem toho sa skladá z dvoch častí (dve vajcia), ktoré sa nachádzajú vo vzdialenosti od seba.

Skutočné rozmery oblastí, ktoré zaberajú druhý a tretí obrázok, sú zvýraznené v žltej a šedej farbe.

Kombinácia z-indexu s farbou pozadia

Treba poznamenať, že vlastnosti CSS background & z-index sa navzájom dopĺňajú. Všetky blokové prvky a všetky ostatné prvky vždy zaberajú obdĺžnikovú oblasť tvorenú maximálnou výškou a maximálnou šírkou obsahu.

Použitím obrázkov môžete dať 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 okolo obrysu vybraného tvaru, ale ak tomu tak nie je, obsah spadá do akéhokoľvek prvku, napríklad do obdĺžnikového poľa, postupne, pretože pochádza zo vstupného prúdu.

Použitie vlastníctva CSS z-indexu na prvku, ktorého farba pozadia je transparentná (druh transparentnosti) umožňuje napodobniť akýkoľvek obrys prvku. Aj keď v skutočnosti bude prvok pravouhlý.

Udalosti a viditeľnosť prvkov

V miestach, kde je prvok zablokovaný iným prvkom, udalosti na ňom nebudú fungovať. Vo všeobecnosti platí, že ak je prvok mimo dohľadu, je tiež mimo dosahu.

Ak chce vývojár zamknúť tlačidlo alebo položku ponuky, môže ľahko umiestniť na značku zablokovanú inú značku, možno priehľadnú (napríklad pomocou pravidla CSS opacity), ale v každom prípade má vyššiu z-index CSS.

Keďže udalosti z pohľadu používateľa môžu byť rozdelené na zmysluplné a nemajú takýto charakter, pohyb myši, náhodné stlačenie klávesnice na klávesnici, časový signál) je možné použiť na adekvátnu zmenu obsahu v okne prehliadača.

Jednoduchý príklad: návštevník presunul ukazovateľ myši na položku ponuky, ale zatiaľ sa nerozhodol urobiť nič. Vývojár by mohol predvídať túto udalosť, sledovať pohyb do požadovaného bodu dialógu (kliknite - návštevník urobí rozhodnutie) a zobraziť primeraný obsah. Pravidlo z-indexu CSS najlepšie funguje v tomto prípade.

Formát obrázka

Keďže obrázky sú dôležitým stavebným materiálom pre akékoľvek miesto (krása, modernosť, funkčnosť je už známa normou vecí), je veľmi dôležité vybrať formát obrázkov.

Celkovo je možné použiť celý rad existujúcich formátov, ale z hľadiska účelnosti a efektívnosti je rozumné obmedziť * .png pre statické obrázky a * .gif pre animované obrázky. Populárna * .jpg je tiež dobrá, ale neumožňuje flexibilne manipulovať s displejom.

Chyby prehliadača a vývojára

Nie je to často, že z-index CSS nefunguje, ale stane sa to. Pravidlá kaskádovej štýlovej tabuľky vždy fungujú a objem štýlového súboru často dosahuje značné objemy. Keď niečo nie je zobrazené alebo jednoducho nie je to, čo by malo byť, musíte skontrolovať vlastný kód, potom vymazať vyrovnávaciu pamäť prehliadača a znova skontrolovať svoj vlastný kód.

Interpretácia HTML a CSS, prehliadač takmer nerobí chyby - je to axióm. Ak požadovaný prvok nie je prítomný, znamená to, že v konštrukcii CSS {pozícia: absolútna; Z-index: 112233; Vľavo: 10px; Top: 20px; ...} niečo chýba alebo je nesprávne.

Najčastejšia chyba - súradnice prvku sú nesprávne, chýba indikácia jeho viditeľnosti, absolútna alebo relatívna poloha. Niekedy môže byť štýl zadaný priamo na prvku, nie vo svojom štýle. V druhom prípade ide o cestu von zo situácie, ale to predovšetkým naznačuje nejaký druh chyby v kóde.

Štýl musí byť špecifikovaný v štýle triedy alebo identifikátora. Určite štýl na prvku iba vo výnimočných prípadoch.

Použitie jQuery.css (z-index, 123) môže tiež viesť k chybe, ak sa použije na nesprávnu triedu alebo identifikátor. Okrem toho je jQuery skutočne skvelým nástrojom pre vývojárov. Avšak predtým, ako ho aplikujete, to neznamená, že by ste nemali uvažovať: nemôže to robiť s improvizovaným HTML / CSS, z-index nie je pravidlo, ktoré nepotrebuje pozornosť.

Správne vrstvy a logický pohyb

Ideálna stránka je plochá. V každom prípade to je ďaleko od skutočného objemu obraz v masovom rozsahu, a nie je tam žiadna zvláštna potreba. Moderné stránky sú skutočnou praxou, reálnymi úlohami. Musia len pracovať, ale ploché ukazujú trojrozmerný obraz.

Mimochodom, fenomén vstupnej stránky vo forme variantu "stavba stránok" je najlepším potvrdením, že ploché obdĺžnikové formy a suchý, ale extrémne jasný obsah sú tiež dobré a praktické. Treba však poznamenať, že lokality monopolných spoločností zostali vlastné: hlavnou vecou je spoločnosť, jej funkčnosť a výrobná kapacita. Monsters of information technology zistili, že vstupné stránky - to je tvár malých podnikov, príslušenstvo, herbalife a ďalšie "šperky".

Tak či ona, alebo nie, ako to je skutočne správne, budúcnosť ukáže. Je dôležité, aby pri akejkoľvek verzii stránky bolo rozumné nielen maľovať vrstvy obsahu, ale aj zabezpečiť správny pohyb medzi nimi.

Perfektným riešením je AJAX (stránka sa podľa potreby aktualizuje). Oveľa sľubnejším riešením je, keď stránka zobrazuje to, čo je potrebné v danom okamihu v okne prehliadača.

Z-index je vlastne 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 prvku bude viditeľná. Vrstva a stránka sú veľmi relatívne koncepty, pretože je problematické vytvoriť stránku a mať na pamäti hodnoty pravidla z-indexu pre rôzne možnosti zobrazovania obsahu.

Zvyčajne vývojár vyberie obľúbené číslo a dáva ho všetkým značkám v rade a tí, ktorí potrebujú nejako vyčnievať, priradia ďalšie číslo. Dávať dôraz na vrstvy a úrovne stránky nie je mimoriadne progresívna a sľubná prax.

Ak však prenášate sémantický index z-indexu do oblasti dialógu s návštevníkom, môžete vytvoriť praktický efekt. Rovnako ako sa značky môžu prekrývať, môžete prekryť dialógy (návštevník stránok) a vykonať pohyb medzi nimi. Z tohto hľadiska sa zdá, že uplatňovanie pravidla z-indexu CSS je veľmi praktické a praktické.