質問: 制作しているサイトでdiv要素が重なってしまって後筆の要素が隠れてしまっております。 cssがまだまだ不案内で初心者のような質問なのですが、お尋ねさせていただきたく存じます。 また、コードをそのまま載せるとあまりにも冗長なので、リンク先を遅らせていただきます。 このようなご質問の仕方が不適切であればご指摘ください。 必要なコードを記載します。 サイト ・検証しているブラウザはChromeです ・重なってしまうのはselectwrapper/selectwrapper2で後者が隠れてしまいます。 ・どちらもposition:relativeを設定しております。selectwrapperでこれを設定した理由は その子要素のposition:absoluteを設定するために親要素として設定しました。 ・私の理解ではselectwrapper/selectwrapper2を含む親要素でpositionを設定しておらず また、divはブロック要素なので、何もしなくてもselectwrapper2はselectwrapperの下に表示される と理解しているのですが、そのような動作をしません。 ・もっともお尋ねしたいことは、このようにcssが思うような挙動を示さない場合に、どこに問題があるのかを 発見するために、どのような手順や思考の過程で検証されているかということです。まだ本当に不慣れなため、chromeのdeveloper toolでcssを一つずつチェックボックスを付けたり外したし加えたりなどしているのですが、それだけで途方も無い作業になっています。今回もこれらを思考錯誤した結果わからずにご質問させていただきましたが、そのやり方等で何かアドバイス等があればご教示願えれば幸いです。 よろしくお願い申し上げます。
回答: `position:absolute`を設定した要素は親要素の高さに影響を与えません。そのため、親要素の高さが0になっているだけです。 **追記:** ざっくりコードを見てみると不要なpositionを多用しているのがそもそもの間違いだと思います。positionとz-indexでの重ね合わせは便利ですが、意味もわからずつけて回ると混乱するだけだと思います。 【CSS:難しい?意外と便利なpositionを使いこなそう | ホームページ更新倶楽部|お気軽にサイト修正】 【z-index再入門 - z-indexの仕組み | CodeGrid】