Cum funcționează cu adevărat proprietatea z-index? (Programare, Html, Css, Z Index)

utilizator1988903 a intrebat.

Cum funcționează z-index funcționează de fapt?Funcționează în cazul elementelor care nu au specificat position?favorizează elementele (adică le face să fie în partea de sus) care au o valoare specificată? position?

Numerele trebuie să fie negative așa?

<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>

Sau nu? Toate numerele pozitive (în valoare crescătoare) ar ajunge ca ultimul număr să fie în partea de sus, cel din mijloc în mijloc și primul în partea de jos?

Comentarii

  • Învăț de la W3Schools, iar lecția lor despre acest lucru este atât de confuză! 🙁. Încearcă o sursă mai credibilă, cum ar fi MDN. –  > Por alex.
  • citește asta articol, , acesta va oferi câteva trucuri despre z-index și va explica de ce nu funcționează atunci când părinții au proprietăți precum opacitatea, transformarea… –  > Por Jonathan de M..
  • w3.org/wiki/CSS/Properties/z-index : „Funcționează numai pe elemente poziționate (position: absolute;, position: relative; sau position: fixed;).” Explicație mai aprofundată: w3.org/TR/CSS2/visuren.html#propdef-z-index. –  > Por Felix Kling.
  • Această postare de pe FreeCodeCamp este foarte lucidă și simplă. Vă recomand să o parcurgeți. freecodecamp.org/news/… –  > Por Neeraj Sewani.
5 răspunsuri
jamesplease

Sunt permise atât numere întregi negative, cât și pozitive.

Poziția trebuie să fie setată pe element.

Înainte de a intra în aceste detalii, totuși, permiteți-mi să vă explic z-index de la zero.

Fiecare pagină web este alcătuită din ceea ce se numește contexte de stivuire. Puteți să vă gândiți la acestea ca fiind, la propriu, o stivă de elemente. Proprietatea z-index determină ordinea elementelor din fiecare stivă, cu un z-index mai mare fiind plasate mai sus.

Toate paginile încep cu un context de stivuire rădăcină, care se construiește pornind de la elementul rădăcină (așa cum v-ați aștepta). Dar mai multe contexte de stivuire pot fi create în mai multe moduri. Un mod este un div poziționat în mod absolut; copiii săi vor fi într-un nou context de stivuire.

Specificațiile enumeră toate instanțele care creează un nou context de stivuire. După cum au afirmat și alții, acestea includ în mod explicit poziționate explicit și va include în curând elemente care nu sunt complet opace.

După cum am mai spus, z-index are efect numai dacă explicit setați explicit poziția elementului. Acest lucru înseamnă să îl setați ca fiind fixed, , absolute, , sau relative. Cred că cel mai bine se poate arăta acest lucru printr-un exemplu.

În acest exemplu, , ne-am aștepta ca div-ul albastru să fie deasupra celui gri, având în vedere indicele său z, nu? Dar, după cum puteți vedea, este în partea de jos. Acest lucru se datorează, desigur, faptului că nu i-am setat poziția. Odată ce facem asta se afișează așa cum ne-am aștepta. Din nou, trebuie să setați poziția.

Specificațiile ne spun, de asemenea, că valorile negative sunt bune. Acestea fiind spuse, nu trebuie să nevoie de să folosiți valori negative. Este perfect corect să folosiți și numere întregi pozitive. Valoarea implicită z-index pentru un element este 0.

Pentru înregistrare, w3schools este o sursă de învățare care nu este de încredere. Deși poate fi o resursă rapidă și convenabilă, există o mulțime de lacune în informațiile lor și, uneori, chiar informații greșite. Vă recomand să folosiți surse mai fiabile, cum ar fi Mozilla Developer Network, , precum și specificațiile în sine.

Comentarii

  • Este nevoie de un position să fie setat? – utilizator1988903
  • Da. Trebuie să fie fixed, , absolute, , sau relative. –  > Por jamesplease.
  • Uitați-vă aici: coding.smashingmagazine.com/2009/09/15/… Although z-index is not a difficult property to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. – utilizator1988903
Zach Saucier

Înainte de a începe să explic, permiteți-mi să observ că z-index are un efect doar dacă elementul are redat de valoare position:relative, , position:absolute, , sau position:fixed (NU static), deoarece fiecare dintre acestea face ca ea să aibă propriul context de stivuire. Aceasta înseamnă că valori precum initial sau inherit pot funcționa sau nu, în funcție de situație.

Rețineți, de asemenea, că în această postare voi folosi formatul 1.1.1.1 pentru a indica faptul că selectez primul copil al primului element al primului copil al primului copil al primului element. 2.1.1.1 ar fi primul copil al primului copil al celui de-al doilea element și așa mai departe.


Cred că z-index se explică cel mai bine printr-o analogie cu ajutorul unor subliste. Să începem cu cel mai simplu exemplu:

<div class="top-level"></div>
<div class="top-level sibling"></div>

Putem reprezenta acest lucru în termenii unei liste, astfel:

  1. Nivel superior
  2. Fratele de nivel superior

Acum, în mod implicit, cele aflate mai jos în listă vor fi redate deasupra celor dinaintea lor. Deci, în acest caz, 2 va fi poziționat deasupra lui 1.


Ceea ce ne permite indicele z este, în esență, să reordonăm această listă (în anumite limite). Cu cât indicele z este mai mare, cu atât elementul nostru se află mai jos în listă.

Voi folosi aici CSS în linie pentru a ușura prezentarea, dar ar trebui să folosiți și dvs. cu siguranță să evitați inline CSS în codul de producție.

<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>

Acest lucru schimbă acum sub lista noastră ca să arate astfel:

  1. Fratele de nivel superior
  2. Nivel superior – z-index:1

Minunat! Acum, primul element din HTML va fi redat deasupra celui de-al doilea.


Când acest lucru devine mai complicat este atunci când avem de-a face cu elemente copii (imbricate).

Un mod mai simplu de a ne gândi la această situație este să ne gândim că atunci când un element începe să fie redat, acesta va reda toți copiii elementului înainte de a trece la frații săi..

Rețineți, de asemenea, că sub-listele nu pot schimba nivelurile, , ceea ce înseamnă că nu pot fi la același nivel cu elementele părinte sau copil.

Aceasta înseamnă că, dacă avem următoarele:

<div class="top-level">
    <div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>

Sublistele noastre de redare vor arăta după cum urmează:

  1. Nivelul superior
    1. Subnivel – z-index1
  2. Fratele de nivel superior

Astfel, ne uităm la nivelul nostru superior și vedem care se află în partea de jos a listei. În acest caz, 2.0 este, deci va fi deasupra lui 1.0. Apoi ne uităm și vedem dacă are sub-liste (copii). Nu are, așa că trecem la 1.0.

1.0 are un copil, 1.1, care va fi vizual deasupra lui 1.0 (la fel cum ar fi fost dacă nu i-am fi dat un indice z), dar va fi în continuare sub 2.0, deoarece 1.0 este sub 2.0.

Astfel, indicele z nu ne ajută aici, deoarece 1.1 nu are frați.


Să luăm un exemplu ceva mai complex:

<div class="top-level">
    <div class="sub-level" style="z-index: 2;"></div>
    <div class="sub-level sibling"></div>
    <div class="sub-level sibling" style="z-index: 1;"></div>
</div>
<div class="top-level sibling">
    <div class="sub-level"></div>
</div>

Care este sub listarea pentru acest exemplu?

O să vi-l dau eu, dar este bine să încercați și să faceți singur.

  1. Nivelul superior
    1. Subnivel frate sau soră
    2. Subnivelul frate/soție – z-index1
    3. Subnivel – z-index2
  2. Fratele de nivel superior
    1. Subnivel

Astfel, în ceea ce privește ordinea vizuală de sus în jos, ordinea este 2.1, 2.0, 1.3, 1.2. 1.1, 1.0.

Nu e așa de rău, nu-i așa?

Acest comportament este valabil indiferent de adâncimea sau de numărul de frați.


Singura excepție de la regula conform căreia copiii sunt redate deasupra părinților este atunci când copiii au o valoare negativă de z-index. Atunci când este dat un indice z negativ, acesta se plasează sub un element părinte.

Astfel, dacă avem următoarele:

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
</div>
<div class="top-level sibling"></div>

Arborele de sub-liste ar arăta astfel:

  1. Subnivel – z-index-1
    1. Nivel superior
  2. Fratele de nivel superior

Iar stratificarea de sus în jos ar fi 2.0, 1.0, 1.1.

Un exemplu puțin mai complex:

<div class="top-level">
    <div class="sub-level" style="z-index: -1;"></div>
    <div class="sub-level sibling"></div>
</div>
<div class="top-level sibling"></div>

Reprezentarea listei:

  1. Subnivel – z-index-1
    1. Nivel superior
      1. Subnivel
  2. Fratele de nivel superior

Dar ar trebui să evitați să evitați z-indexes. Dacă credeți că aveți nevoie de ele, este probabil ca HTML-ul dumneavoastră să fie structurat necorespunzător.


Cam asta este tot! Dacă sunteți încă interesat să aflați mai multe, citiți specificațiile este întotdeauna bună.

Rețineți că alte proprietăți, , inclusiv, dar fără a se limita la opacity, , transform, , și will-change, , creează propriul context de stivuire și pot avea un efect asupra ordinii de redare a elementelor.


opacity funcționează în mod similar cu z-index – un copil poate fi la fel de opac ca și părintele său – dar nu poate avea valori negative.

Comentarii

  • initial și inherit funcționează foarte bine – valoarea inițială este auto, iar inherit este doar una dintre acele valori pe care nu le folosești niciodată cu adevărat cu z-index, dar este funcționează. –  > Por BoltClock.
thhh

Singura excepție de la regula conform căreia copiii sunt redate deasupra părinților este atunci când copiii au un indice z negativ. Atunci când este dat un indice z negativ, acesta se plasează sub un element părinte.

Kevin Bowersox

Proprietatea css z-index funcționează numai pe elemente poziționate, ceea ce înseamnă că elementele trebuie să fie poziționate absolut, fix sau relativ pentru ca proprietatea z-index proprietatea să aibă efect.

Cu cât este mai mare z-indexul, cu atât mai aproape de față va apărea. Valorile specificate pentru proprietățile z-index proprietate pot fi pozitive sau negative. Un element poziționat cu o proprietate z-index de 4 va apărea deasupra unui element poziționat cu o valoare de z-index valoare de 3.

În CSS 2.1, fiecare casetă are o poziție în trei dimensiuni. În plus față de pozițiile lor orizontale și verticale, casetele se află de-a lungul unei „axe z” și sunt formatate una peste alta. Pozițiile pe axa Z sunt deosebit de relevante atunci când casetele se suprapun vizual.

Comentarii

  • „Cu cât indicele z este mai mare, cu atât mai aproape de partea de sus va apărea.” poate: „Cu cât este mai mare indicele z, cu atât mai aproape de față va apărea.” ar fi mai clar. –  > Por steveax.
  • Conform linkului din răspunsul lui @JABFreeware de aici, se spune că nu este necesar ca elementul să fie poziționat pentru z-index să funcționeze! Este adevărat acest lucru? – utilizator1988903
  • @FallintotheShadows Sunt aproape sigur că trebuie să fie poziționat. Vedeți:developer.mozilla.org/en-US/docs/CSS/z-index –  > Por Kevin Bowersox.
  • @FallintotheShadows nu sunt sigur cum ai obținut asta din articolul legat. Acesta afirmă (corect): „z-index va funcționa numai pe un element a cărui proprietate de poziție a fost setată în mod explicit la absolut, fix sau relativ.” –  > Por steveax.
  • @steveax uitați-vă aici: Although z-index is not a difficult property to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. – user1988903
FrostyFire

Acest articol despre z-index este exact link-ul pe care îl căutați! El chiar explică foarte bine.

Practic, cu cât numărul este mai mare, cu atât elementul va fi mai sus pe stivă. Deci, 1 este deasupra lui 0 și -1 este sub z-indexul lui 0, însă ar trebui să fie păstrate pozitive, deoarece nu există niciun motiv pentru a folosi negative; este considerată o practică proastă. Browserul îl interpretează atunci când redă pagina, ca orice alt cod CSS sau HTML.

Comentarii

  • Pentru ca acesta să funcționeze, trebuie să fie un position necesar să fie setat? De asemenea, W3Schools a dat negative în exemplele sale… 🙂 Cred că a sosit momentul să încep să cred w3fools.com! 🙂 – utilizator1988903
  • @FallintotheShadows Da, trebuie să setați proprietatea de poziție la absolut, relativ sau fix. Practic, orice, cu excepția static, care este valoarea pe care browserele o folosesc dacă nu este setată –  > Por FrostyFire.
  • Dar pe linkul pe care l-ați furnizat în răspunsul dvs., se spune că nu este necesar să aveți un set position! Se spunea că ar funcționa implicit… – user1988903
  • @FallintotheShadows Nu în toate browserele. Cel mai bine este să urmați convenția. Îmi pare rău că te-am încurcat –  > Por FrostyFire.