z-index が効かない時の対処方法
- 2015/10/07
- 2015/10/11
- 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▶
次の記事
- 画像やテキストを中央（上下左右真ん中）に配置する方法
関連記事
-
-
WP Social Bookmarking Lightを好きな場所に設置、移動する方法
WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…
-
-
画像やテキストを中央（上下左右真ん中）に配置する方法
普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…
-
-
Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿！でもいざFBでシェアしようとしたら、サムネイル…
-
-
スマホ、携帯からタップ（クリック）で電話を発信する、htmlの記述方法 コピペでOK!!
スマホ等のタブレット、また携帯で、電話番号をタップ（クリック）して直接かけるhtmlの記述方法です。 …
-
-
OGPをWP-OGPのプラグインを改変して設定する！！2015年のOGP最新設定
今度こそ。。。OGPの設定で何時間、というより何日？何ヶ月？かかってるんや。。。という感じなのですが、もう最初の投稿から…
-
-
WordPressでGIFアニメが動かない時の対処法
今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…
-
-
onMouseOver、onMouseOutで、簡単にテキストを切り替える！
前回のonMouseOver,onMouseOutで簡単に画像を切り替える！の続き、応用編です。 実はこちらサイト…
-
-
2018最新版：スマホ・タブレットの解像度一覧表（画面サイズの割合）
最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…
-
-
日付を自動更新で表示させる！ 簡単コピペ！！
先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか？』という依頼がありました。 とって…
-
-
2017最新版：SNS等の公式ロゴ（アイコン）素材のまとめ（Facebook, Instagram, Youtube, Twitter, Line etc.）
一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ（アイコン）』だと思うのですが、サイト…
