z-index が効かない時の対処方法
- 2015/10/11
- 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が効かない時は、他の部分もチェックしてみてください。
もし他にも方法や原因がわかれば、追記します。
- ◀PREV
前の記事
- WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法
- NEXT▶
次の記事
- 画像やテキストを中央（上下左右真ん中）に配置する方法
関連記事
-
-
はてなブックマーク（はてぶ）でブックマークしたURLを、まとめて変更する方法！
ドメインの変更をすると、301リダイレクトで対策をしたとしても（詳細はこちら）やはり今まで稼いできた被リンクも一緒に変更…
-
-
WordPress：特定カテゴリで投稿を古い順に表示させる方法
Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対（投稿した順番…
-
-
サーバー移転の手順 その3：移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
-
『WinSCP』をMacで使えるようにする方法！！
FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…
-
-
opacityの書き方 クロスブラウザ
今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…
-
-
【2019最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）
最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…
-
-
wordmark.it でフォントを選ぶ方法
フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…
-
-
ドメイン＆WordPressを含むサイトの引越しでの、URL変更作業：『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って
最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが（301リダイレクトの記述方法、URLの正規化…
-
-
Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…
-
-
お名前.com から脱出する！：ドメインの移管方法
『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件（詳細はこちら）で大変な思いをしたのですが、そ…
