【備忘録】z-indexが効かない！そんなときに試したいこと【CSS】

2018/11/16
Web



CSSで要素の重なり順を指定するプロパティ「z-index」。

とある案件で要素の重なり順をコントロールしようとしていたところ、いくら指定をしても思い通りの重なり順にならない。どういうことなの・・・。

ということで、先人様の知恵をお借りしてみた結果、すんなり思い通りの重なり順にできました！

試した方法はシンプル。

cssの position: relative; を追記する

です。

うーん、CSSの意味合いを考えたら納得するのですが、盲点でした。


■参考にした記事
・css 重なり z-index 効かない 解決法 - Qiita
・z-index が効かない！入れ子でも階層構造でもz-indexを効かしてデザインしたい！ – 76bit Cafe


タグ ：cssz-indexz-index 効かない

同じカテゴリー（Web）の記事
【備忘録】WordPressでスマートフォン・タブレット端末別に条件分岐させる方法
【備忘録】WordPressでスマートフォン・タブレット端末別に条件分岐させる方法(2018-12-20 20:11)

【ライフハック】Webデザイナーが教える雨の日を楽しむための方法
【ライフハック】Webデザイナーが教える雨の日を楽しむための方法(2018-11-09 17:01)

【制作ハック】ソースコードの余白はこれでかんたん削除！
【制作ハック】ソースコードの余白はこれでかんたん削除！(2018-11-07 18:25)

そのパスワードで本当に大丈夫？パスワードが情報漏洩してるか確認できるWebサイト「Have I Been Pwned
そのパスワードで本当に大丈夫？パスワードが情報漏洩してるか確認できるWebサイト「Have I Been Pwned(2018-11-06 19:24)

お茶をヒントに生まれた日本のアイデアソン「茶ッカソン」
お茶をヒントに生まれた日本のアイデアソン「茶ッカソン」(2018-11-02 14:05)

【備忘録】Webサイト制作で使用頻度の高いfont-familyをまとめたった
【備忘録】Webサイト制作で使用頻度の高いfont-familyをまとめたった(2018-10-26 18:06)

Posted by yamanaka

上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

写真一覧をみる

削除
【備忘録】z-indexが効かない！そんなときに試したいこと【CSS】
    アイコン（絵文字）の挿入 スタンプ（絵文字）の挿入
    コメント(0)