Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Cascading Style Sheets » Indicele Z în web design, CSS (stabilirea nivelurilor straturilor elementelor)

Indicele Z în web design, CSS (stabilirea nivelurilor straturilor elementelor)

Tocmai când credeam că am scăpat de terorile precedenței și moștenirii în web design, avem de luat în considerare un alt factor în stratificarea noastră.

Indicele z al unui obiect determină ordinea acestuia în stiva de elemente dintr-o pagină. Acesta este modul în care putem controla ce elemente sunt reprezentate deasupra altuia atunci când ocupă aceeași porțiune a unei pagini.

În timp ce articolele sunt automat stratificate în funcție de locația lor pe pagină și în codul nostru, acestea pot fi modificate și înlocuite de un indice z pentru a seta ordinea pe care o dorim. O valoare mai mare a unui indice z forțează un obiect „mai sus” pe pagină sau îl apropie de „topul” tuturor elementelor la care vă uitați.

Un fundal de pagină, de exemplu, este de obicei cel mai jos nivel al paginii dvs. Ca atare, oricare alt conținut de pe pagină se află deasupra stratului de fundal și devine următorul strat din stivă.

O modalitate simplă de a vă asigura că mesajele importante nu sunt niciodată ascunse în spatele la altceva este să le atribuiți un index z extrem de mare, cum ar fi 99999. Ar trebui să utilizați o astfel de metodă numai pentru unul sau două elemente critice dintr-un site.

În primul nostru exemplu, vom vedea o imagine cu un indice negativ care asigură că se află în spatele textului nostru. Apoi vom schimba valoarea indicelui crescând-o, pentru a pune elementuș deasupra textului:

Indicele Z în web design, CSS

<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<h1>Here is some text</h1>
<img src="http://telework.ro
/files/cloud.jpg"
width="100" height="100" />

Indicele Z în web design, CSS

<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<h1>Here is some text</h1>
<img src="http://telework.ro
/files/cloud.jpg"
width="100" height="100" />

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

Resursa esențială care te va ghida pas cu pas în lumea complexă a platformei WordPress.

Nu a fost votat 3.52 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Ghid WordPress pentru începători
Ghid WordPress pentru începători

Descoperă arta gestionării site-urilor web cu WordPress!

Nu a fost votat 2.644.83 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Ghidul complet pentru proiectarea, dezvoltarea și întreținerea siturilor web, o resursă indispensabilă

Nu a fost votat 2.6410.55 Selectează opțiunile Acest produs are mai multe variații. Opțiunile pot fi alese în pagina produsului.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *