DevTools z-index – Chrome ウェブストア
ginpei/devtools-z-index: Stop `z-index: 999999` !!
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
z-index は CSS のプロパティの一つで要素の重なり順を指定します。
z-index – CSS: カスケーディングスタイルシート | MDN
HTMLとCSSの重ね合わせコンテキスト – 株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発
大雑把に言えば z-index はより大きな値を設定された要素程、上の方に描画される様になるプロパティです。このため、ある要素より上に置きたい時はそのある要素の z-index を知る必要があります。複数の要素の上に置きたい場合はその複数の要素の z-index を知る必要があります。 DevTools z-index はその知る作業を楽にする拡張機能です。
DevTools z-index – Chrome ウェブストア
インストールすると次の様に開発者ツールに z-index タブが増えます(隣の Z-index タブは z-context – Chrome ウェブストア という一つの z-index を詳しく知るためのまた別の Chrome 拡張です)。
z-index の何番がどの要素に使われているか一目でわかります。これを用いることで手間をかけて問題になっている要素を探したり、勘でやたら巨大な値を大雑把に当てたりしなくても済みます。