- ベストアンサー
CSSでコーディングしている際に、レイアウトが重なってしまう問題の解決方法
- CSSでコーディングをしている際に、要素のレイアウトが重なってしまうという問題が発生しました。
- 特にpositionプロパティの設定が原因であることがわかっていますが、解決方法が分かりません。
- また、jQueryを使用してナビゲーションバーのスクロール機能を実装した際に、他の要素がうまく動作しなくなるなど、さまざまな配置の問題に直面しています。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいいですか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> body{margin:0;padding:0;} #wrap{ width:100%; width:100%;} #header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;} #nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;} #a{ width:100%; height:522px; background:#ccf; margin-top:150px;} #b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1{ position:absolute; left:0; bottom:0;} #c2{ position:absolute; right:0; top:0;} #footer{ height:100px; background:#fac; } </style> </head> <body> <div id="wrap"> <div id="header"> header <div id="nav">nav</div> </div> <div id="a">a</div> <div id="b" class="box">b <div class="c_box" id="c1">c1</div> <div class="c_box" id="c2">c2</div> </div> <div id="footer">footer</div> </div> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました。 わざわざjquery使わなくてもnav動く！確かに！！ ソース拝見しそう思いました。 まだまだお勉強不足です。 お返事がおそくなりましてもうしわけありませんでした。 本当に助かりました。 ありがとうございました。