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 se află. 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 reciproc. Valoarea z-index determină

Trebuie să acordăm un omagiu browserelor moderne și algoritmilor pentru afișarea elementelor. Având în vedere că zilele în care grafica si ecrane capturate formate părți probleme de tăiere vizibile și invizibile ale elementelor din fereastra aplicației, conținutul vizibil tehnologia de afișare a ajuns la rezultate excelente. În fereastra browserului, toate elementele sunt afișate corect, utilizatorul vede numai ceea ce este definit de design sau dezvoltator.

Regula generală: ordinea și nivelul

Fluxul de intrare (pagina formată de server) este citită succesiv de browser. 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 sub 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ă să țină cont de acele situri care sunt absorbite de fiecare dintre următoarele elemente este foarte dificilă.

În majoritatea cazurilor, 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 să o reducă, deoarece imaginea generală se modifică. Secvența elementelor din flux rămâne aceeași:

• div id =„scCSS1`-
• div id =„scCSS2`-
• div id =„scCSS3`-
• 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 o distanță una de cealaltă.

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

Combinând indexul z cu culoarea de fundal

Rețineți că proprietățile fundalului CSS 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 ține cont corect.

Puteți plasa text pe o formă calea selectată, dar dacă nu, conținutul ajunge la orice element într-o cutie dreptunghiulară, în mod succesiv, la primirea intrare.

Folosind proprietatea CSS index z-index într-un element pe care culoarea de fundal are valoarea 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 un element este blocat de un alt element, evenimentele de pe acesta nu vor funcționa. Ca regulă generală, în cazul în care 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 Opacitate CSS), dar, în orice caz, având un index CSS mai înalt.

De la eveniment, din punct de vedere al utilizatorului, pot fi împărțite în relevante și nu au nici o, atunci ultima (se deplasează mouse-ul, apăsarea butoanelor aleatoare de pe tastatură, semnalul temporizator) poate fi folosit pentru a schimba în mod adecvat conținutul în fereastra browser-ului.

Un exemplu simplu: vizitatorul sa mutat mouse pointer pe elementul de meniu, dar încă nu a decis să facă 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 index este cea mai potrivită pentru acest caz.

Formatul imaginii

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

În general, puteți utiliza toate varietate de formate existente, dar din punct de vedere practic și eficiența este destul de rezonabil pentru a limita * .jpg pentru imagini statice și * .jpg - pentru imagini animate. Popular * .jpg este, de asemenea, bun, dar nu vă permite să manipulați flexibil spațiul de afișare.

Eroare de browser și de dezvoltator

Nu atât de des există o situație în care indexul CSS z-index nu funcționează, dar se întâmplă. Regulile mesei stil cascadă funcționează întotdeauna, iar volumul dosarului de stil ajunge adesea la volume semnificative. Atunci când ceva nu este afișat corect sau pur și simplu nu este ceea ce ar trebui să fie, trebuie mai întâi să verificați propriul cod, apoi să ștergeți memoria cache a browserului și să verificați din nou codul propriu.

Interpretarea HTML și CSS, browser-ul aproape că nu face greșeli - este un axiom. Dacă nu există un element dorit, atunci în construcție CSS {position: absolute- z-index: 112233-stânga: 10px; top: 20px; ...} ceva lipsește sau este scris greșit.

Cea mai obișnuită greșeală - coordonatele elementului sunt incorecte, indicarea vizibilității acestuia, absența poziției absolute sau relative. 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 aceasta indică în primul rând o 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 a le aplica, nu durează să se gândească: nu se poate face cu HTML / CSS improvizate, z-indexul nu este o regulă care nu are nevoie de o atenție deosebită.

Straturile corecte și mișcarea logică

Pagina ideală este netedă. În orice caz, 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 pagini de destinație (Pagina de destinație) sub formă de opțiuni „clădire site-ul“ - cea mai bună dovadă că forma plană dreptunghiulară și uscată, dar extrem de conținutul precis - de asemenea, bun și practic. Dar trebuie remarcat faptul că site-urile companiilor de monopol au rămas cu ele: principalul lucru este aspectul companiei, funcționalitatea și capacitatea sa de producție. Tehnologia informației Monștrii au considerat paginile de destinație ca fiind o afacere mică, accesorii, herbalife și alte "bijuterii de costume".

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, dar și să asigure o mișcare corectă între ele.

Soluția perfectă este AJAX (pagina este actualizată după cum este necesar). O soluție mai promițătoare atunci 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 ce 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 îi 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.

Totuși, dacă transferați semantica z-index în zona de dialog cu vizitatorul, puteți crea un efect practic. În mod similar cu modul în care se pot suprapune etichetele, puteți suprapune dialogurile (site-ul de vizitatori) și puteți efectua mișcarea între ele. Din acest punct de vedere, utilizarea regulii z-indexului CSS pare foarte practică și practică.