【Chrome拡張】開発者ツール上で全ての使用済み z-index を把握するための DevTools z-index の紹介

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 の何番がどの要素に使われているか一目でわかります。これを用いることで手間をかけて問題になっている要素を探したり、勘でやたら巨大な値を大雑把に当てたりしなくても済みます。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG