初心者:position設定してもz-indexが効かなかった原因

htmlをCSSで同じ場所に設定すると、何も指定しなければ要素の上から順に下が優先されて重なっていきます。

これに手を加えるz-indexは、要素の重なりを指定の順番に入れ替えるというものです。ところがこれは絶対的な順番ではないので、指定した順番に並ばないことがあります。

調べてみると対策として「positionをstatic(デフォルト)以外のrelativeやabsolute、stickyに設定しろ」というものがたくさん出てくる。しかし、初心者に毛が生えたような私があちこちのサイトを参考にしてコーディングしているキメラサイトでは、どうしてもz-indexが設定した順にならなかったのです。

しっかり理解している人は全然引っかかることのない部分というか、解決してみれば当たり前のことを念頭に置いていなかったとか要素の仕組みを理解していないことが原因なんですけどね。

ということで今回、私がz-indexが効かなかくて躓いた原因を。

z-indexは基本的に同じ階層の要素を数字順に並び替えるもの
CSSセレクタにチルダとか使っちゃってませんか

z-indexは基本的に同じ階層の要素を数字順に並び替えるもの

これで説明は終わってしまうんですが。

おそらくz-indexが効かなくて悩んでいる人は入れ子要素を多用して、その一部をz-indexでposition:fixedとかしているんじゃないでしょうか。この入れ子要素がくせ者でして、同じ階層の入れ子要素にしかz-indexは働きません。

下記に例を挙げますが実際に動かしていないので、私のような素人が理解した簡単な理屈はこうだという意味で取っていただければ。

<!– HTML部分 –>

—

/* CSS */

.red {
position: absolute;
z-index: 1;
background: red;
width: 10px;
height: 10px;
}

.blue {
position: absolute;
z-index: 3;
background: blue;
width: 10px;
height: 10px;
}

.black {
position: absolute;
z-index: 2;
background: black;
width: 10px;
height: 10px;
}

こうすると、何もz-indexを設定していなければz-index: 3;のredの上にz-index: 2;のblackが、その上にz-index: blue;が重なって青色が表示される……はず。適当です。フィーリングなのでその通りでなくてもイメージで。

<!– CSS同じでおそらく上記の通りにならないHTML –>

とかやっちゃうとおかしくなってきます。何度も言うように実際には試していませんがフィーリングで。たぶん赤が表示されるんじゃないでしょうか。

なぜなら同じ階層にblueとredは無いから。おそらく赤の内部で黒の上に青が重なるはずですが、それもきちんと動作するかわかりません。

ということで、z-indexで躓いた人は一度同じ階層にあるかどうかを確認した方がいいですよ、と。本職の人には当たり前なのかもしれませんが、にわかでやる羽目になるとやっぱり難しいです。

CSSセレクタにチルダとか使っちゃってませんか

セレクタにチルダとか使っちゃってると階層の管理を把握がややこしいことになりがちです。特に全体を “id=wrapper” とかで囲っちゃったりdiv地獄に陥っている人は要注意。

ちなみに一端整理して本当に必要か考え直したら他のもっとスマートな方法があったというオチがありました。

どうしても最初に手をつけた方法にこだわってしまいがちで、原因を追及するのも勉強にはなります。でも、面倒くさくなってきたらさっさと別の方法に変えて、本格的にやるのは本職に任せるのが一番かもしれません。