L'Inspector de z-index revela l'ordre d'apilament complet de cada element d'una pàgina web. Cada element amb un valor de z-index es ressalta i s'etiqueta directament sobre la pàgina, i un panell de mapa de capes ordenat mostra totes les capes de z-index des de la part inferior fins a la superior. Identifica els contextos d'apilament creats per position, transform, opacity i altres propietats CSS — convertint la depuració del z-index en una tasca visual i intuïtiva.
Els errors de z-index són dels més frustrants en CSS. Una finestra modal que hauria d'aparèixer per sobre de tot queda amagada darrere d'una barra lateral. Un menú desplegable desapareix darrere de la següent secció. Una descripció emergent (tooltip) és invisible perquè un element pare crea un context d'apilament inesperat. La causa principal és quasi sempre una confusió sobre com funcionen els contextos d'apilament — i les DevTools del navegador pràcticament no ajuden a visualitzar-los. L'Inspector de z-index fa visible l'invisible. Cada element amb un z-index explícit rep una superposició de color i una etiqueta amb el seu valor. Un panell de mapa de capes ordenat llista tots els valors de z-index des del més baix fins al més alt, mostrant a quina classe CSS o element pertany cada valor. El més important és que l'eina identifica els límits dels contextos d'apilament — elements que creen nous contextos d'apilament mitjançant position + z-index, transform, opacity < 1, filter, will-change o isolation. Entendre quin avantpassat crea el context d'apilament sol ser la clau per solucionar els errors de z-index.
Cada element amb un valor de z-index rep una superposició de color semitransparent i una insígnia d'etiqueta que mostra el seu número de z-index. Els valors de z-index més alts reben colors càlids (vermells) i els més baixos colors freds (blaus). L'estratificació visual fa que l'ordre d'apilament sigui intuïtiu a l'instant.
Un panell lateral llista tots els valors de z-index trobats a la pàgina, ordenats des del més alt (part superior) fins al més baix (part inferior). Cada entrada mostra el valor del z-index, el selector CSS o el nom de la classe i la propietat position. Clica en qualsevol entrada per ressaltar l'element corresponent a la pàgina.
Identifica cada límit de context d'apilament de la pàgina i la propietat CSS que el crea — position: relative/absolute amb z-index, transform, opacity < 1, filter, will-change, isolation: isolate, o contain: layout. Aquests es llisten per separat perquè puguis rastrejar per què un valor de z-index no s'està comportant com s'esperava.
Clica en qualsevol capa del panell per ressaltar i desplaçar-te fins a l'element corresponent de la pàgina. O clica en qualsevol element ressaltat de la pàgina per localitzar-lo al panell del mapa de capes. Navega per l'ordre d'apilament en la direcció que et resulti més natural.
Cada entrada de capa mostra el valor position de CSS de l'element (static, relative, absolute, fixed, sticky), ja que el z-index només s'aplica als elements posicionats. Detecta casos on el z-index està establert però la posició és static — un error comú on el z-index no té cap efecte.
Per a qualsevol element seleccionat, veu la cadena completa de contextos d'apilament dels avantpassats fins a l'arrel. Entén exactament quin context d'apilament d'un avantpassat està limitant l'abast del z-index de l'element — la informació clau per a la depuració de la majoria de problemes de z-index.
Una finestra modal amb z-index: 9999 queda amagada darrere d'una barra lateral amb z-index: 10. Com és possible? L'Inspector de z-index mostra que el pare de la finestra modal té position: relative i crea un context d'apilament amb z-index: 1, mentre que el pare de la barra lateral té z-index: 2. La finestra modal mai podrà escapar del context del seu pare.
Un menú desplegable desapareix darrere de la secció següent quan s'obre. L'inspector revela que el contenidor del menú té overflow: hidden (que també crea un context d'apilament) o que la secció següent té un z-index més alt. El ressaltat visual de les capes fa que la superposició sigui òbvia.
Amb el temps, els valors de z-index s'acumulen: 10, 100, 999, 9999, 99999. El mapa de capes mostra tots els valors ordenats, facilitant la identificació de l'interval real necessari i permetent simplificar-ho en una escala neta (1, 2, 3, 10, 100).
Els ginys de xat, els bàners de galetes i les superposicions analítiques injecten elements amb valors de z-index elevats. L'Inspector de z-index mostra exactament quins valors utilitzen, ajudant-te a establir els teus propis valors de z-index adequadament per evitar conflictes.
Revisa tots els contextos d'apilament de la pàgina per comprovar si hi ha alguns que no siguin necessaris. Les transformacions, els filtres i l'opacitat aplicats per efectes visuals poden crear contextos d'apilament involuntàriament que causen problemes de z-index en altres llocs. La llista de contextos els fa tots visibles.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Inspector de z-index. L'eina escanejarà la pàgina i identificarà cada element amb un valor de z-index i cada límit de context d'apilament.
Els elements amb valors de z-index reben superposicions de color directament sobre la pàgina, amb etiquetes que mostren els seus números de z-index. Els valors més alts apareixen amb colors càlids i els més baixos amb colors freds.
Obre el panell lateral per veure totes les capes de z-index ordenades de la més alta a la més baixa. Cada entrada mostra el valor, el selector i la propietat position. Clica en qualsevol entrada per ressaltar l'element a la pàgina.
La secció "Contextos d'apilament" (Stacking Contexts) del panell llista cada element que crea un nou context d'apilament i la propietat CSS responsable. Aquesta sol ser la clau per entendre els problemes de z-index.
Clica en qualsevol element per veure la seva cadena de contextos d'apilament d'avantpassats — quins contextos pare afecten el seu ordre de renderització. Segueix la cadena cap amunt per trobar el límit del context que està causant el problema d'apilament.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
