z-index が効かない時の対処方法

  • 公開日2015/10/07
  • HowTo

z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて解決しちゃったり、力技でなんとかしたり、違う方法にしたり等、毎回悪戦苦闘してるような気がするので、ここはキチンとメモっとこう。ということで、覚書です。
ってことで、

対処方法

position を relative にする!!!

以上です!!
解説やなんやらはこの際どうでもよい。解決したいだけやねん!って方は、とにかく、

z-index で上下移動したいところに「position: relative;」を入れる!

この作業をしてください。

簡単な解説

position のデフォルト設定は、staticのようで、これが悪さをしているようです。
なので、position が static以外の時は何も意識しなくても z-index が効くようですが、z-index が効かない時はとりあえず positionをチェックしてみたら解決する確率は高いと思います。

他にも色々複合的な問題もあると思いますので、「position: relative;」 でもz-indexが効かない時は、他の部分もチェックしてみてください。

もし他にも方法や原因がわかれば、追記します。

Google AdS



関連記事

ページネーションがおかしい!次のページに行かない原因と解決方法|サムネイル

ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す


今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…

記事を読む▷


IcoMoonにSVGファイルをインポート

IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法


今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…

記事を読む▷


WindowsのSafariで【background】が効かない時の原因と対処方法


最近cssではショートハンドを使って記述するのが当たり前になってきたので(ショートハンドの詳細はこちら)、今回トラブルと…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて


今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Google AdS

  • Apple 製品情報




PAGE TOP