「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示させる

CSSで設定しはじめるとややこしいのがz-index、どの要素にどれだけの値が設定されているのか分からず、「とりあえずz-index:999999;にしておこう」となりがちです。

そんな風にその場のノリで設定していると、いつの間にかどんどん値が大きくなって管理が大変になります。

今回は現在表示しているページの、どの要素にz-indexがかかっているのか一覧で表示できるChrome拡張機能の「DevTools z-index」について紹介します。

DevTools z-indexのインストール

chrome.google.com

DevTools z-index

https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe

Print all elements with z-index sorted by that number.

「DevTools z-index」はChromeウェブストアからインストールできます。

他のChrome拡張機能と違って、画面右上にアイコンは追加されないので注意が必要です。
（追加されている場合は右クリックから非表示にできます）

DevTools z-indexの使い方

インストールすると、開発者ツールの［Elements］タブ内の、［Styles］や［Computed］などが並んでいるタブ内に［z-index］が追加されます。

追加されている［z-index］タブをクリックすると、z-indexの値と要素の一覧が、値の大きい順に並んでいます。

要素をクリックすれば、その要素が選択できるようになっているので、どの部分のコードかもすぐに分かります。

他の人が書いたコードを触るときなんかも、一度これで確認して現状がどうなっているか確認するといいですね。