Nu fac prima pagină, dar m-am confruntat cu această problemă pentru prima dată. Într-unul dintre modele, am avut nevoie să remake meniul pentru catalog. Inițial, a fost folosit un meniu cu un nivel, dar afacerea clientului a crescut și a fost necesar să se implementeze un meniu tipic cu mai multe niveluri.
"Nici o problema!" - M-am gandit si am inceput rapid sa schitez stiluri suplimentare cu markup. Timpul nu a făcut prea multe pentru acest lucru, dar primul test nu a reușit. Nivelele de meniu au apărut, așa cum se intenționa, dar din anumite motive au fost acoperite de elemente din partea centrală a paginii.
"Ha!" - mi-a strălucit în cap. Probabil, unul din stiluri nu are proprietatea "z-index", ceea ce permite controlul ordonării suprapunerii elementelor poziționate pe pagină. A început să adauge "z-index" și nimic bun nu a venit din ea. Orice valoare nu i-am atribuit, elementele din centrul paginii mi-au acoperit încă meniul.
Indexul z-ambiguu
Se pare că poate fi complicat cu indexul z? Toată lumea știe că elementele poziționate pe o pagină se pot suprapune. Gestionarea ordinii de suprapunere permite doar proprietatea "z-index". De exemplu, dacă avem două elemente cu o valoare index indexată z de 5 și 10, atunci ultima va fi afișată în prim-plan, deoarece zece este mai mult de cinci, și mai mult este mai aproape. Atunci când proprietatea "z-index" nu este specificată, ordinea suprapunerii este determinată de ordinea elementelor din document.
Nu există complicații, până când începeți să săturați mai adânc. Primele dificultăți încep atunci când apar așa-numitele contexte suprapuse. În contextul unei suprapuneri, înțelegem elemente cu părinți obișnuiți care se mișcă împreună în față sau înapoi.
Contextul suprapus are un element rădăcină. De exemplu, avem un fel de
pentru care definim contextul suprapunerii. Prin urmare, toți copiii vor cădea, de asemenea, în același context de suprapunere.
Aici vine partea distractivă. Contextele suprapuse nu se intersectează reciproc. Aranjând elementul la cel mai adânc fundal al unui context, nu se va ridica mai sus elementul contextului învecinat. Schimbarea valorii "z-index" chiar și la cele mai incredibile numere nu va aduce efectul așteptat.
Când se formează un nou context suprapus
Specificația definește mai multe condiții pentru formarea contextului suprapus:
Privind în perspectivă, voi spune că pentru a rezolva sarcina mea era necesar doar să adaugă transparența (opacitatea) pentru elementul rădăcină al meniului și totul a funcționat imediat, așa cum a fost intenționat.
Cum sunt afișate elementele într-un singur context suprapus
Pentru a consolida mai bine toate cele de mai sus, amintiți-vă odată pentru totdeauna ordinea de afișare a elementelor într-un context de suprapunere (de la distanță la aproape).
Trimiteți-le prietenilor: