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
関連記事
-
-
ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って
最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…
-
-
WordPressサイトが遅い原因は「PHPのスリープ」かも?cron設定で対策する方法!XSERVERにて
管理しているWordPress(ワードプレス)のサイトをチェックする時、『最初だけ』いっつもおっそいなぁ。 と思ってたん…
-
-
IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法
今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…
-
-
【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法
2025/07 更新「Unicode変換ツール」を修正しました 以前から:before :afterなどの擬似…
-
-
[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて
今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…



