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▶
次の記事
- 画像やテキストを中央（上下左右真ん中）に配置する方法
関連記事
-
-
onMouseOver、onMouseOutで、簡単にテキストを切り替える！
前回のonMouseOver,onMouseOutで簡単に画像を切り替える！の続き、応用編です。 実はこちらサイト…
-
-
【2019最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）
最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…
-
-
複数の横に並ぶブロック要素をセンタリングさせる！！
よく複数の画像をfloatで並べることありますよね？でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…
-
-
URLの正規化：wwwあり、なしのドメインを統一する記述方法（エックスサーバー(XSERVER) にて）
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…
-
-
SNS等の公式ロゴ（アイコン）素材のまとめ（Facebook, Instagram, Youtube, Twitter, Line etc.）
一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ（アイコン）』だと思うのですが、サイト…
-
-
wordmark.it でフォントを選ぶ方法
フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…
-
-
お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法
先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…
-
-
サーバー移転の手順 その3：移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
-
サーバー移転の手順 その2：データベースの移行（phpMyAdminを使って）
前回サーバ移転の手順 その1：サーバーからサーバーへの移行（同サーバー(EXTREM)同士）からの続きです！ って…
-
-
『WinSCP』をMacで使えるようにする方法！！
FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…
