CSS z-index: prezentare generală, proprietăți

Regula CSS z-index - poziția elementului de pagină în coordonatele Z: nivelul afișajului elementului sau stratul în care acesta este localizat. O etichetă care are mai mult z-index va fi afișată în întregime. Etichetele sunt afișate în ordinea în care apar în firul de intrare și se suprapun. приоритет видимости. Valoarea z-index determină prioritatea vizibilității.

Este necesar să se acorde un omagiu browserelor moderne și algoritmilor pentru afișarea elementelor. Din momentul în care ecranele grafice au fost capturate și problema tăierii părților vizibile și invizibile ale elementelor din ferestrele de aplicații, tehnologia de afișare a conținutului vizibil a obținut rezultate excelente. În fereastra browserului, toate elementele sunt afișate corect, utilizatorul vede doar ceea ce este definit de design sau de dezvoltator.

Regula generală: ordinea și nivelul

Fluxul de intrare (pagina formată de server) este citită de browser în ordine. Toate etichetele sunt afișate în conformitate cu regulile CSS și se pot suprapune.

În acest exemplu, sunt descrise patru elemente vizibile. Fiecare următor o blochează pe cea precedentă. În locurile în care se intersectează etichetele, apare problema priorității. Deoarece regula CSS pentru toate aceste etichete este aceeași și egală cu 848, elementul care merge mai departe este vizibil. Tot ceea ce arată din fiecare element următor aparent.

Regula privind vizibilitatea

Navigatorii respectă regula vizibilității exclusiv "cinstit". Pentru a gândi un algoritm prin care puteți analiza toate suprapunerile în bloc și aplicați numai acelea care se intersectează cu adevărat fără a lua în considerare acele site-uri care sunt absorbite de fiecare dintre următoarele elemente este foarte dificilă.

În cele mai multe cazuri, acest lucru nu este necesar. Echipamentele moderne funcționează foarte repede și este foarte problematic să observați redragerea elementului înainte ca elementul următor să îl înlocuiască.

Efectul asupra secvenței elementelor

Este suficient ca a treia etichetă scCSS3 să crească valoarea indexului z și scCSS4 - pentru ao reduce, deoarece imaginea generală se modifică. Secvența elementelor din flux rămâne aceeași:

• id= 'scCSS1'; Div id = "scCSS1";
• id= 'scCSS2'; Div id = 'scCSS2';
• id= 'scCSS3'; Div id = "scCSS3";
• id= 'scCSS4'. Div id = 'scCSS4'.

Trebuie remarcat faptul că cea de-a doua imagine ocupă mai mult spațiu decât pare. A treia imagine. În plus, este alcătuită din două părți (două ouă), situate la distanță una de cealaltă.

Dimensiunile reale ale zonelor care ocupă cea de-a doua și cea de-a treia imagine sunt evidențiate, respectiv, în culorile galben și gri.

Combinând indexul z cu culoarea de fundal

Trebuie remarcat faptul că proprietățile CSS din fundal și z-index se completează reciproc. Toate elementele de bloc și oricare altele, ocupă întotdeauna o zonă dreptunghiulară formată din înălțimea maximă și lățimea maximă a conținutului.

Folosind imaginile, puteți da orice formă zonei elementului, dar va exista întotdeauna un dreptunghi în jurul acestuia. Acesta este un fapt important pentru a fi luat în considerare în mod corect.

Puteți plasa textul în jurul conturului formei selectate, dar dacă nu, conținutul se încadrează în orice element, ca într-o cutie dreptunghiulară, secvențial, așa cum provine din fluxul de intrare.

Folosind proprietatea CSS a indexului z pe un element a cărui culoare de fundal este transparentă (un fel de transparență) vă permite să emulați orice contur al unui element. Deși, în orice caz, în realitate elementul va fi dreptunghiular.

Evenimente și vizibilitate element

În locurile în care elementul este blocat de un alt element, evenimentele de pe el nu vor funcționa. Ca regulă generală, dacă elementul nu este vizibil, este, de asemenea, în afara domeniului.

Dacă dezvoltatorul dorește să blocheze un buton sau un element de meniu, poate plasa cu ușurință o altă etichetă peste eticheta blocată, poate transparentă (de exemplu, folosind regula de opacitate CSS), dar în orice caz are un index CSS mai mare z.

Deoarece evenimentele, din punctul de vedere al utilizatorilor, pot fi împărțite în semnificative și nu au astfel de elemente, acestea din urmă (mișcarea mouse-ului, apăsarea accidentală de pe tastatură, semnalul temporizat) pot fi folosite pentru a schimba în mod corespunzător conținutul din fereastra browserului.

Un exemplu simplu: vizitatorul mișcă indicatorul mouse-ului peste elementul din meniu, dar nu a luat încă o decizie de a face nimic. Dezvoltatorul ar putea să prevadă acest eveniment, să urmărească mișcarea până la punctul dorit al dialogului (faceți clic pe - vizitatorul ia decizia) și să afișați un conținut adecvat. Regula CSS a indexului z funcționează cel mai bine pentru acest caz.

Format imagine

Deoarece imaginile reprezintă un material de construcție important pentru orice site (frumusețea, modernitatea, funcționalitatea este deja o normă familiară a lucrurilor), este foarte important să alegeți un format pentru imagini.

În general, puteți folosi întreaga varietate de formate existente, dar din punct de vedere al practicității și eficienței, este rezonabil să vă limitați la * .png pentru imagini statice și * .gif pentru imagini animate. Popular * .jpg este, de asemenea, bun, dar nu vă permite să manipulați flexibil spațiul de afișare.

Erori pentru browser și eroare de dezvoltator

Nu este adesea faptul că indexul CSS nu funcționează, dar se întâmplă. Regulile mesei stil cascadă funcționează întotdeauna, iar volumul dosarului de stil ajunge deseori la volume semnificative. Când ceva nu este afișat sau pur și simplu nu este ceea ce ar trebui să fie, mai întâi trebuie să vă verificați propriul cod, apoi goliți memoria cache a browserului și verificați din nou propriul cod.

Interpretarea HTML și CSS, browser-ul aproape că nu face greșeli - este un axiom. Dacă elementul dorit nu este prezent, înseamnă că în construcția CSS {position: absolute; Indice Z: 112233; Stânga: 10px; Sus: 20px; ...} ceva lipsește sau este scris greșit.

Cea mai obișnuită greșeală - coordonatele elementului sunt incorecte, indicarea vizibilității acestuia, poziția absolută sau relativă lipsește. Uneori, stilul poate fi specificat direct pe element, nu în stilul său. În ultimul caz, aceasta este o cale de ieșire din situație, dar acest lucru indică în primul rând un fel de eroare în cod.

Stilul trebuie specificat în stilul clasei sau al identificatorului. Specificați stilul elementului numai în cazuri excepționale.

Utilizarea jQuery.css (z-index, 123) poate duce la o eroare dacă este aplicată unei clase sau unui identificator greșit. În plus, jQuery este un instrument foarte bun pentru dezvoltatori. Cu toate acestea, înainte de ao aplica, nu durează să gândești: nu se poate face cu HTML / CSS improvizate, z-indexul nu este o regulă care nu are nevoie de o atenție deosebită.

Straturi corecte și mișcări logice

Pagina ideală este netedă. În orice caz, acesta este departe de o imagine reală a volumului pe o scară în masă și nu există o nevoie specială pentru acest lucru. Site-urile moderne sunt practici reale, sarcini reale. Trebuie doar să lucreze, dar cele plate arată o imagine tridimensională.

Apropo, fenomenul de pagina de destinație sub forma unei variante de "construire de sit" este cea mai bună confirmare a faptului că formele dreptunghiulare plate și conținutul uscat, dar extrem de clar, sunt de asemenea bune și practice. Dar trebuie remarcat faptul că site-urile monopoliste au rămas proprii: principalul lucru este persoana companiei, funcționalitatea și capacitatea sa de producție. Monstrii tehnologiei informației au constatat că paginile de destinație - aceasta este fața întreprinderilor mici, a accesoriilor, a herbalife și a altor "bijuterii".

Deci, sau nu, așa cum este corect, viitorul va arăta. Este important ca în orice versiune a site-ului să aibă sens nu numai să picteze straturile de conținut, ci și să asigure o mișcare corectă între ele.

Soluția perfectă este AJAX (pagina este actualizată după cum este necesar). O soluție chiar mai promițătoare este când pagina afișează ceea ce este necesar într-un anumit punct din fereastra browserului.

De fapt, indexul z este o regulă CSS simplă. Scopul său este de a arăta nivelul etichetei astfel încât browserul să poată determina când să afișeze elementul și care parte din acest element va fi vizibilă. Stratul și pagina sunt concepte foarte relative, deoarece este problematică dezvoltarea unei pagini și reținerea valorilor regulii z-index pentru diferite opțiuni de afișare a conținutului.

De obicei, dezvoltatorul selectează un număr favorit și îl dă tuturor tag-urilor într-un rând, iar cei care trebuie să iasă în evidență atribuie următorul număr. Acordarea de importanță straturilor și nivelurilor paginilor nu este o practică deosebit de progresivă și promițătoare.

Cu toate acestea, dacă transferați semantica indexului z în zona de dialog cu vizitatorul, puteți crea un efect practic. La fel cum etichetele se pot suprapune, puteți să suprapuneți dialogurile (site-vizitator) și să efectuați mișcarea între ele. Din acest punct de vedere, aplicarea regulii z-indexului CSS pare foarte practică și practică.