- ベストアンサー
z-indexを用いた常にウィンドウ上部に表示されるメニュー
こんばんは。 今CSSでんなメニューの見せ方をしたいのですが、 どうも上手くいかなくて困っています。 どなたか教えていただけませんでしょうか。 【参考サイト】 http://www.ellegarden.jp/ja/index.asp このフッターの部分をトップメニューとして、 常にウィンドウの上部に表示されるようにしたいと思っています。 上部に位置することは出来るんですが、 ウィンドウをスクロールしたときに、 他のコンテンツといっしょに移動してしまいます。 スクロールをしても位置が変わらない方法が分かりません。 ※できればフッターの部分にbackground-imageでpng透過を使いたいと思っているので、 overflow: autoの使わずにz-indexを使った方法ですと助かります。 またjavascriptが必要であれば、それを使った方法でも構いません。 パンク寸前なので上手く説明できてるか自分で定かではないですが、 宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE7、Firefox、Operaでは下記のソースで再現できました。 しかし、position:fixedがIE6に実装されていないようです。 *{ margin:0; padding:0; } body { position:relative; } #contents{ position:absolute; top:60px; left:0; z-index:0; } #header { width:100%; height:60px; background-color:#ccc; position:fixed; top:0; left:0; z-index:1; } <div id="header"> <p>ああああああああああああああ</p> </div> <div id="contents"> <p>あ<br />い<br />う<br />え<br />お<br />か<br />き<br />く<br />け<br />こ<br />さ<br />し<br />す<br />せ<br />そ<br />た<br />ち<br />つ<br />て<br />と</p> </div> javascriptは、 「スクロール 定位置 メニュー 固定」で検索すると、 それらしいものが出てきます。
その他の回答 (1)
方法が2つあります。 １つは1さんの言われてているようにposition:fixed;で固定する方法。 これはIE6以下が対応できていませんが、http://www.doxdesk.com/software/js/fixed.html を読み込むことでjavascriptがonの場合にのみposition:fixed;にも対応することができます。 ただし、javascriptがoffの場合には反映されなくなってしまうので、 #NAV { position:absolute; top:0; position:fixed; top:0; } のように、先にposition:absolute;で指定しておき、上書きするというのがオススメです。 こうしておけばfixedが効かないときにも、レイアウトだけは崩れなくてすみます。 もう１つが、擬似フレームという方法です。 これはhtmlまたはbodyのスクロールバーを消し、bodyの代わりになるdivを用意してその部分だけをスクロールできるようにすることで、IE6でもヘッダーやフッターを固定してやる方法です。 <style type="text/css"> html,body,h1,ul,li { margin:0; padding:0; } h1 { height:100px; } ul { height:50px; } html, body { height:100%; width:100%; overflow:hidden; } div { height:100%; width:100%; margin-top:-150px; overflow:scroll; } </style> <body> <h1>ヘッダー</h1> <ul> <li>メニュー</li> </ul> <div> コンテンツ </div> </body> ただ、この方法はブラウザによってはマウスホイールやPage Downキーでのでのスクロールができなくなってしまうのでオススメはしません。 どうしてもjavascriptを使いたくないページでのみの利用にとどめるほうが良いと思います。
お礼
１つは1さんの言われてているようにposition:fixed;で固定する方法。 これはIE6以下が対応できていませんが、http://www.doxdesk.com/software/js/fixed.html を読み込むことでjavascriptがonの場合にのみposition:fixed;にも対応することができます。 回答ありが当座います。 なるほどです。 IE6の問題はとてもやっかいですね； この方法も試してみたいと思います。 ありがとう御座いました！
お礼
>javascriptは、 >「スクロール 定位置 メニュー 固定」で検索すると、 >それらしいものが出てきます。 返信遅くなって申し訳ありません！ たくさん検索で出てきました。 ありがとうございました＾＾