CSS Stacking Context inspector för Google Chrome

CSS Stacking Context inspector for chrome from Andrea Dragotta

CSS Stacking Context-inspektören är en devtools-tillägg för Chrome som gör det enkelt att inspektera CSS-staplingskontexter och lösa z-index-kriget. Den skapades med hjälp av två vänner, där en av dem skapade den och den andra hjälpte till med koden.

Det är en träd-baserad vy som visar all relevant information om det valda elementet. Det är till hjälp för utvecklare och designers att se vad som pågår och att lösa problem som kan uppstå från felaktig användning av z-index-egenskapen.

Trädet består av två delar: vänster sida visar förälder staplingskontexter, och höger sida visar barn staplingskontexter. Detta gör att du kan inspektera trädet och identifiera elementet som har ett visst z-index-värde.