Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

【CSS】z-indexが効かないときの対処法

CSSでz-indexが効かないときの対処法

泥沼にはまってしまったので、備忘録も兼ねて残しておきたいと思います。
position:absolute;、position:fixed;、ネガティブマージン(margin-bottom:-100pxみたいなマイナス表記のやつ)を使ったりすると、「要素同士が重なっちゃって、重なり順を変更したい・・・。」ということが結構ありますよね。そこでz-indexを使ってみたけど、効果がない(泣)、そんなときの対処法です。

対処法

positon:relative;を設定してあげる。以上。

重なり順を設定したい要素の片方にpositon:relative;が設定されていたので、他の要素にもposition:relative;を設定してあげるだけで解決しました。単純だけどなかなか気付かず、私は2時間ほど時間を無駄にしました・・・。
めでたしめでたし。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA