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:

<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