CSS Stacking Context inspector для Google Chrome

Контекстный инспектор CSS Stacking для Chrome от Андреа Драготта

Инспектор контекста стека CSS — это расширение devtools для Chrome, которое упрощает проверку контекстов стека CSS и решает проблему войны z-index. Он был сделан с помощью двух друзей, один из них создал его, а другой помог с кодированием.

Это древовидное представление, которое показывает всю необходимую информацию о выбранном элементе. Разработчикам и дизайнерам полезно видеть, что происходит, и решать проблемы, которые могут возникнуть из-за неправильного использования свойства z-index.

Дерево состоит из двух частей: левая часть показывает родительские контексты наложения, а справа показаны дочерние контексты наложения. Это позволяет просматривать дерево и идентифицировать элемент с определенным значением z-index.