Straturi CSS, poziționare absolută și relativă, z-index. Un alt blog independent

Orice elemente poziționate pe o pagină web pot fi stivuite unul peste altul într-o anumită ordine, simulând astfel o a treia dimensiune perpendiculară pe ecran. Fiecare element poate fi fie sub, fie deasupra altor obiecte de pe pagina web, plasarea lor de-a lungul axei z este controlată de z-index . Această proprietate funcționează numai pentru elementele a căror valoare de poziție este absolută, fixă ​​sau relativă.

informatie scurta

Denumiri

	Descriere	Exemplu
<тип>	Indică tipul valorii.	<размер>
A && B	Valorile trebuie să fie afișate în ordinea specificată.	<размер> && <цвет>
A | B	Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B).	normal | litere mici
A || B	Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine.	lățime || numara
	Grupează valori.	[ recolta || cruce ]
*	Repetați de zero sau de mai multe ori.	[,<время>]*
+	Repetați una sau mai multe ori.	<число>+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	<радиус>{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	<время>#

×

Valori

Numerele întregi (pozitive, negative și zero) sunt folosite ca valori. Cu cât valoarea este mai mare, cu atât elementul este mai mare în comparație cu acele elemente care au o valoare mai mică. Dacă valoarea z-index este egală, elementul din prim-plan este cel descris mai jos în codul HTML. Este acceptabilă utilizarea unei valori negative.

Pe lângă valorile numerice, se folosește auto - ordinea elementelor în acest caz este construită automat, în funcție de poziția lor în codul HTML și de apartenența lor la părinte, întrucât elementele copil au același număr ca și elementul părinte.

Exemplu

În acest exemplu, când treceți cu mouse-ul peste hartă, aceasta ajunge la marginea din față, suprapunând parțial restul imaginilor (Fig. 1).

Orez. 1. Schimbarea ordinii cardurilor

Model de obiect

Un obiect.stil.zIndex

Notă

Lista creată cu , în versiunile de Internet Explorer până la 6.0 inclusiv, este întotdeauna afișat deasupra altor elemente, indiferent de valoarea z-index.

Versiunile de Internet Explorer până la 7.0 inclusiv interpretează automat ca 0.

În versiunile browserului Firefox până la 2.0 inclusiv, o valoare z-index negativă poziționează elementul sub fundalul paginii web și al conținutului acesteia.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

×

Problema cu indexul z este că mulți oameni pur și simplu nu înțeleg cum funcționează.
Tot ceea ce este descris mai jos este în specificația W3C. Din păcate, nu toată lumea o citește.

Descrierea problemei:

Deci, să presupunem că avem un cod HTML format din 3 elemente.
Fiecare dintre ele conține unul în sine. Și fiecare, la rândul său, are propriul fundal: roșu, verde și, respectiv, albastru. În plus, fiecare este poziționat absolut la marginea din stânga sus a documentului în așa fel încât să se suprapună ușor pe cel de lângă el. Prima are un z-index egal cu 1, celelalte două nu au un set de z-index.

Mai jos este codul HTML cu design CSS de bază.

roșu

Verde

Albastru

.roșu, .verde, .albastru ( poziție: absolut; ) .roșu ( fundal: roșu; z-index: 1; ) .verde ( fundal: verde; ) .albastru ( fundal: albastru; )
Exemplu pe jsfiddle

Sarcină: asigurați-vă că roșul este în spatele albastrului și al verdelui, fără a încălca niciuna dintre următoarele reguli:

• Nu puteți schimba marcajul HTML
• Nu puteți modifica/adăuga z-index la elemente
• Nu puteți modifica/adăuga poziționarea elementelor

Soluţie:

Soluția este să adăugați puțin mai puțin de o transparență la prima (părintele roșului).
Iată css-ul care ilustrează asta:
div:primul copil ( opacitate: .99; )

Hmm, ceva nu este în regulă aici. Ce legătură are transparența cu asta? Cum poate influența ordinea elementelor care se suprapun? Crezi la fel? Bun venit în club!
Sper că în a doua parte a articolului totul va fi la locul lor.

Ordinea elementelor de suprapunere:

Indicele Z pare foarte simplu: cu cât valoarea este mai mare, cu atât elementul va fi mai aproape de noi, adică. un element cu un indice z de 5 se va suprapune pe un element cu un indice z de 2, nu? Nu chiar.
Aceasta este problema indexului z. Totul pare atât de evident încât majoritatea dezvoltatorilor nu petrec suficient timp studiind această problemă.

Orice element dintr-un document HTML poate fi fie în prim-plan, fie în fundal. Toată lumea știe asta. Regulile care definesc această ordine sunt descrise clar în specificație, dar, așa cum am spus mai sus, nu toată lumea le înțelege pe deplin.

Dacă indexul z și proprietățile de poziționare nu sunt setate în mod explicit, totul este simplu: ordinea de stivuire este egală cu ordinea elementelor din HTML. (De fapt, este puțin mai complicat decât atât, dar atâta timp cât nu folosiți valori negative de umplutură pentru a suprapune elementele inline, nu veți întâlni cazuri de margine)

Dacă specificați în mod explicit poziționarea pentru elemente (și copiii lor), atunci astfel de elemente se vor suprapune elementelor fără o proprietate explicită de poziționare. (Când spun „specificați în mod explicit poziționarea”, mă refer la orice altă valoare decât statică, de exemplu: absolută sau relativă).

Și în sfârșit, cazul în care este dat indicele z. Pentru început, este firesc să presupunem că elementele cu un indice z mare vor fi deasupra elementelor cu un indice z mai mic, iar orice element cu un set de indice z va fi deasupra unui element fără un set de indice z, dar acest lucru nu este cazul. În primul rând, indicele z este luat în considerare doar pe elementele poziționate în mod explicit. Dacă încercați să setați indexul z pe un element nepoziționat, nu se va întâmpla nimic. În al doilea rând, valorile z-index pot crea contexte suprapuse. Hmm, lucrurile s-au complicat mult, nu-i așa?

Suprapunerea contextului

Elementele cu părinți comuni care se mută împreună în prim-plan sau în fundal sunt cunoscute sub denumirea de context de suprapunere. Înțelegerea contextului de stivuire este cheia pentru înțelegerea indexului z și a ordinii de stivuire a elementelor.

Fiecare context de suprapunere are propriul său element rădăcină în structura HTML. În momentul în care se formează un nou context pe un element, toate elementele copil intră și ele în acest context și își iau locul în ordinea de suprapunere. Dacă un element este poziționat în partea de jos a unui context de suprapunere, nu există nicio modalitate de a fi afișat deasupra altui element într-un context de suprapunere adiacent mai sus în ierarhie, chiar și cu un index z setat la un milion.

Un nou context se poate forma în următoarele cazuri:

• Dacă elementul este elementul rădăcină al documentului (elementului)
  Dacă elementul nu este poziționat static și valoarea lui z-index nu este automată
  Dacă elementul are opacitate mai mică de 1

Majoritatea proprietăților CSS sunt destul de ușor de utilizat. Adesea, aplicarea unei proprietăți CSS unui element din marcajul dvs. va produce rezultate imediate - de îndată ce reîmprospătați pagina, setul de valori al proprietății va fi aplicat și veți vedea imediat rezultatul. Alte proprietăți CSS, totuși, sunt mai complexe și vor funcționa numai după setarea unui set specific de condiții.

Proprietatea z-index aparține ultimului grup de proprietăți. Această proprietate a provocat confuzie larg răspândită și frustrare mai des decât orice altă proprietate CSS existentă. În mod ironic, totuși, când ajungi să cunoști indicele z, veți realiza că această proprietate este foarte simplă și oferă o metodă eficientă pentru rezolvarea multor probleme de aspect.

În acest articol, veți afla ce este indexul z, cum poate fi interpretat greșit și câteva exemple de utilizare. În plus, veți învăța câteva diferențe în comportamentul browserului atunci când gestionați proprietatea z-index, afectând în principal versiunile anterioare de Internet Explorer și Firefox. Această prezentare detaliată a z-index va oferi dezvoltatorilor o bază excelentă pentru utilizarea acestei proprietăți în mod sigur și eficient.

Ce este?

Proprietate indicele z definește nivelul de stivă al unui element HTML. „Nivelul stivei” se referă la poziția unui element pe axa Z (direcțional perpendicular pe axa X sau axa Y). Elementul căruia i se atribuie cea mai mare valoare z-index va fi poziționat chiar în partea de sus a stivei de straturi. Acest teanc de straturi este poziționat perpendicular pe ecran sau pe zona de vizualizare.

Vedere 3D a axei Z:

Pentru a demonstra cum funcționează indicele z, imaginea de mai sus mărește ușor afișarea elementelor stivei în raport cu fereastra.

Ordine normală de stivă

Pe o pagină HTML, ordinea normală a stivei (adică ordinea elementelor pe axa Z) este determinată de un număr de factori. Următoarea este o listă care arată ordinea în care sunt stivuite elementele, începând de jos. Nu există elemente în această listă cu proprietatea z-index atribuită:

• Fundalul și chenarul unui element care creează contextul stivei
• Elemente cu context negativ de stivă, în ordinea apariției
• Elemente bloc nepoziționate, neplutitoare, în ordinea apariției
• Elemente nepoziționate, plutitoare, în ordinea apariției
• Elemente în linie, în ordinea apariției
• Elemente poziționate, în ordinea apariției

Când proprietatea z-index este utilizată corect, poate schimba ordinea normală a stivei.

Desigur, ordinea elementelor dintr-o stivă nu este la fel de clară atâta timp cât elementele sunt poziționate suprapunându-se. Prin urmare, pentru a vedea ordinea normală a stivei, se pot folosi marjele negative așa cum se arată mai jos:

Bloc gri

Bloc albastru

Bloc maro

Blocurilor prezentate mai sus li se atribuie culori diferite de fundal și chenar, iar ultimelor două blocuri li se atribuie în mod specific o umplutură superioară negativă pentru a ilustra ordinea normală de stivuire. Blocul gri apare primul în aspect, blocul albastru al doilea, iar blocul maro al treilea. Marjele negative atribuite demonstrează perfect acest fapt. Aceste elemente nu au valori atribuite indicele z, sunt localizate pe pagină în ordinea obișnuită sau implicit. Se suprapun reciproc datorită marjelor negative.

De ce există confuzie?

Deși z-index nu este o proprietate dificil de înțeles, dacă este interpretat greșit, poate fi confuz pentru dezvoltatorii începători. Această concepție greșită apare deoarece proprietatea z-index va funcționa numai pentru un element care are proprietatea de poziție setată la una dintre cele trei valori: absolut, fix sau relativ.

Pentru a demonstra că z-index funcționează numai pe elementele poziționate, iată aceleași trei blocuri, împreună cu valorile z-index aplicate pentru a schimba ordinea normală a stratului:

Bloc gri

Bloc albastru

Bloc maro

Blocul gri are o valoare z-index setată la „9999”; blocul albastru are o valoare z-index setată la „500”; și blocul maro, valoarea indicelui z este setată la „1”. Ar fi logic să presupunem că ordinea în care sunt stivuite blocurile ar trebui să se schimbe. Dar acest lucru nu s-a întâmplat în acest exemplu, deoarece niciunul dintre aceste elemente nu avea o proprietate de poziție atribuită.

Iată aceleași blocuri, dar cu poziția: proprietatea relativă adăugată fiecăruia dintre ele și proprietățile z-index atribuite anterior:

Bloc gri

Bloc albastru

Bloc maro

Acum, am obținut rezultatul dorit: ordinea elementelor s-a schimbat; blocul gri se suprapune pe albastru, iar albastrul, la rândul său, se suprapune pe maro.

Sintaxă

Proprietatea z-index poate afecta ordinea stratului atât a elementelor bloc, cât și a elementelor inline și este setată prin alocarea unei valori pozitive sau negative, întregi sau automate. Valoarea auto dă elementului aceeași ordine a stratului ca și elementul părinte.

Iată cum arată codul CSS pentru al treilea exemplu, unde proprietatea z-index este aplicată corect:

#grey_box ( lățime: 200px; înălțime: 200px; chenar: solid 1px #ccc; fundal: #ddd; poziție: relativ; z-index: 9999; ) #blue_box ( lățime: 200px; înălțime: 200px; chenar: solid 1px # 4a7497; fundal: #8daac3; poziție: z-index: 500; #gold_box;

Din nou, merită să reamintim din nou, în special pentru dezvoltatorii începători, că proprietatea z-index nu va funcționa până când nu aplicați poziționarea elementului.

Folosind JavaScript

Dacă doriți să schimbați dinamic valoarea z-index a unui element folosind JavaScript, este destul de simplu. Sintaxa este aceeași ca pentru accesarea majorității proprietăților CSS, trebuie doar să înlocuiți proprietățile CSS cu silabe cu cod, așa cum se arată mai jos:

Var myElement = document.getElementById("cutie_aur"); myElement.style.position = „rudă”; myElement.style.zIndex = "9999";

După cum se arată în exemplu, proprietatea CSS „z-index” este scrisă ca „zIndex”. De asemenea, „culoare-fond” devine „culoare fundal”, „greutate font” devine „greutate font” și așa mai departe.

De asemenea, folosind codul de mai sus, proprietatea de poziție este modificată deoarece z-index va funcționa numai pe un element poziționat.

Manevrare incorectă în IE și Firefox

În anumite circumstanțe, unele browsere pot trata proprietatea z-index în mod diferit, inclusiv versiunile Internet Explorer 6 și 7 și Firefox versiunea 2.

Elemente

în IE6

În Internet Explorer 6, elementul apare întotdeauna în partea de sus în ordinea straturilor, perturbând ordinea normală, valorile de poziționare sau indexul z. Această problemă este ilustrată în imaginea de mai jos:

Element

apare mai întâi în ordinea normală a stratului și primește o valoare z-index de „1” împreună cu o valoare a proprietății de poziție relativă . Blocul maro apare al doilea, în ordinea straturilor, și i se atribuie o proprietate z-index de „9999” . În conformitate cu regula ordinii normale a straturilor și proprietățile z-index atribuite, blocul maro ar trebui să se suprapună elementului , ceea ce se întâmplă în toate browserele actuale, cu excepția IE6:

– Selectați anul – 2009 2010 2011

Bloc maro

Dacă te uiți la acest exemplu, folosind browserul IE6, vei vedea că elementul

, suprapune blocul maro, ignorând ordinea normală a straturilor și proprietățile z-index.

Această eroare în IE6 cauzează probleme cu meniurile drop-down care nu se pot suprapune elementelor . Există două soluții la această problemă. Prima este ascunderea temporară a elementului folosind JavaScript , apoi afișați-l din nou după ce meniul drop-down dispare. O altă soluție presupune utilizarea