- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：ヘッダフッダ固定でコンテンツ部分が指定出来ない。）
ヘッダフッダ固定でコンテンツ部分が指定出来ない
このQ&Aのポイント
- ヘッダフッダ固定でコンテンツ部分が指定できないという問題が発生しました。
- 現在作成しているHPでは、ヘッダフッダを固定しており、中央のコンテンツ部分のみをスクロールするようにしています。
- しかし、コンテンツ部分を指定することができず、リンクなどをクリックすることができません。
- caseyjones
- お礼率100% (1/1)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どのような方法で、ヘッダ・フッタ固定をしているのか分からないので、なんとも回答ができないのですが。文面を読む限りは、おそらく要素の重なり順が影響していると思われます。 コンテンツが正常表示されていても、重なりとして、ヘッダやフッタの下にコンテンツがある状況だと、クリックしているのは、コンテンツではなく、ヘッダ・フッタのどちらかということになります。具体的には、ヘッダ・フッタの透明部分をクリックしていることになるでしょう。 要素の重なり順は、CSSのz-indexで設定できます。ただ、z-indexを有効にするには、同要素にstatic以外の値をpositionに指定する必要があります。 #contents{ position:relative; z-index:2; }
お礼
すみません。。。 自分で解決する事が出来ました。 div#headerArea { position: fixed !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image:url("../images/header.png"); background-repeat:repeat-x; text-align: center; } ここでheightをきちんと指定しなかった為に、前面に来てしまっていました。 ヒントを下さったので、ベストアンサーにさせて頂きます。 ありがとうございました。
補足
html cssが規約違反という事で消えてしまっていました。 ご返答ありがとうございます。 z-indexを使用したのですが、それでもうまく行きませんでした。 補足で申し訳ありませんが、使用しているタグになります。 <body> <img src="bgimages/bg1.jpg" alt="" class="bgmaximage" /> <script type="text/javascript"> $(function(){ jQuery('img.bgmaximage').maxImage({ isBackground: true, overflow: 'auto', verticalAlign:'center' }); }); </script> <!--ヘッダーフッダー指定--> <div id="headerArea"> <div id="menu"> ここにメニュー </div> </div> <div id="contentsArea"> <div id="container"> <div id="contents"> ここにコンテンツ </div> </div> <div id="sidebar"> ここにサブメニュー </div> </div> <div id="footerArea">Copyright</div> </body> /*↓ヘッダーフッダー固定↓*/ body{ margin: 0; padding: 150px 0 50px 0; color: #A0522D; } * html body{ overflow: hidden; } div#headerArea { position: fixed !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image:url("../images/header.png"); background-repeat:repeat-x; text-align: center; } div#footerArea { position: fixed !important; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background-color: #BC8F8F; text-align: center; } * html div#contentsArea{ height: 100%; overflow: auto; } img.menu { position: absolute; } div#menu{ position:absolute; top: 78px; width: 850px; margin-left:-400px; left: 50%; text-align: center; } /*↑ヘッダーフッダー固定↑*/ /*↓コンテンツ表示部分↓*/ #contentsArea{ width: 900px; margin: 20px auto; } #container{ width: 100%; float: right; margin-left: -180px; } #contents{ position:relative; z-index:2; margin: 0 30px 20px 120px; padding: 20px 0 20px 0; text-align: center; background-image:url("../images/contents.png"); background-repeat:repeat-y; } #sidebar{ width: 180px; float: left; } /*↑コンテンツ表示部分↑*/