CSSのプロパティ【z-index】が効かない時の対処方法

久しぶりにwebページを作成していたら、最後にcssのz-indexが効かなくて、少々時間を取られてしまった。

そのため備忘録的に対処方法を書いておこうと思う。

z-indexで絶対知っておくべきこと

z-indexは要素の重なり順を指定するプロパティで、ここまでは漠然とだけど、「そんなことは知っている」って感じの方が多いのではないかと思う。

しかし、これだけの知識だけだとz-indexがつかいこなせず困ることになる。

重要なのは以下。

z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

上記にもあるように、positionプロパティを設定しないと、そもそもz-indexは効かないってこと。これをやってなかったせいではまった。

そもそも要素が重なることは普通にコーディングしていればあまりない。（意図的に重なるようにするときは別だけど）

しかし、外部のリソースを使用する場合、cssなどの関係でどうしても要素の重なりがでてしまうことがある。例えばリンクをクリックしたのに指定したurlに飛ばないとか。

そもそも上記のようなことが、要素の重なりが原因でおこっているということに気づくのも時間がかるかもしれない。

z-indexが使い方がよくわからない場合は、そもそも要素を重ならないように工夫する手も考えられる。（heightプロパティで要素の高さを調節するとか）

しかしそれはそれで面倒というか、的確に要素を指定しないと、他の要素にも影響がでるなどしてわりと手間がかかる。

結局のところz-indexを使ったほうが楽なので、positionプロパティでとりあえずrelativeを設定するのを忘れないようにすれば問題ないだろう。

最近はやり？の【サルワカ】とかいうサイトをよくみかけるけど、あのサイトがやくにたったことはあまりない。

html/css関係で一番的確なのは【htmlクイックリファレンス】

以上でcssのz-indexが効かない時の対処方法は終わり。