カテゴリ:CSSテクニック 2009年3月16日 13:09
[2009/08/14 修正]
内容が若干分かりづらかったので加筆しました。全体的な内容は変わっていません。[2009/03/22 修正]
サンプルの問題の修正に合わせて、記事を書き直しました。
今回は IE6 でも、CSS だけでposition: fixedを実現するテクニックです。
通常、IE6 ではposition: fixedをサポートしていないため、普通に指定するだけでは固定配置されません。
今回紹介するテクニックは、いくつかの IE6 のレンダリングの誤差を使って巧みに position: fixed を実現する方法です。
まずは以下のデモを IE6 で見てみてください。ちゃんと右下に固定配置されているのが分かると思います。
大きく分けると、実現するための方法としての要点は 5 つ。
上記 5 点を踏まえて HTML、CSS を書くと以下のようになります。
▼EntryMore▼
HTML 側のポイントは 2 つ。
まず、IE6 が標準準拠モードで動作するよう、xml 宣言をせずに、かつ適切に DOCTYPE 宣言を行います。
次に、他のブラウザには必要ないですがdiv#coverでコンテンツ全体(固定配置したい要素以外)をくくります。HTML での注意点はこれだけです。
続いて、CSS の注意点は 3 つ。
まず、html と body 要素に対して、height: 100%とoverflow-y: autooverflow-y: hiddenとoverflow-x: hiddenoverflow-x: autoを指定します。
次に、div#cover に対してoverflow: autoと position: relativeを指定します。
width と height を 100% にしているのは、コンテンツをブラウザ幅いっぱいに広げるためです。
最後に、position: fixed を適用したい要素(サンプルでは fixedItem)に対して、position: absoluteを指定します。
なぜこうするかというと、標準準拠モードで動作している状態で、html 要素と body 要素双方に height: 100% が指定されていて、かつ overflow: auto が指定されていると、 position に relative か absolute が指定された要素が固定配置となります。
上記がそのまま今回のテクニックの肝なのですが、このままでは固定配置したくないものに対して position: absolute も position: relative も使えなくなってしまいます。
レイアウトによっては問題ないかもしれませんが、大体の場合においてどちらかひとつは必ず使いますよね。
ですが、このままでは本来の意味での position: relative や position: absolute が使えません。
そこで、div#coverが必要になってくるわけです。
まず、html と body 要素に overflow: auto の代わりに、横方向に関してはスクロールバーを内容に応じて出現するようにしつつ、縦方向のスクロールを消します。
さらに div#cover 要素にoverflow: autoを指定することで、縦方向のスクロールを div#cover で代用します。
加えて、position: relativeを追加することによって、 div#cover 自体も固定配置されたことになりますが、コンテンツ全体をくくっているため縦に長くなったコンテンツの場合は、これに指定されたoverflow: autoが働き、スクロールが維持される、というわけです。
さらに position: relative になっているため、この中で使われた position: absolute の指定も、本来の意図通りに反映される、というわけです。
最後に、この div#cover 外に置かれた position: relative(absolute) が指定された要素は固定配置されるので、まるでposition: fixedを指定したのと同じ動きをする、というわけです。
合わせて読むと役に立つかもなエントリー
この記事のカテゴリー一覧を見る⇒CSSテクニック
トラックバックURL
トラックバック
Webサイトの背景を画像で表示するデザインは個人的に結構好きです。その世界にトリップしたような気分になるので。しかし、このデザインを採用する上で問題となる...
byweblog 2011年6月13日 03:00
コメント
1 - gingami さん
はじめまして。nちょうどこの動きを使いたくてとても参考・勉強になりました!nただしカスタマイズでつまずいています・・・。ny軸は縦スクロールバーの動きと同じ(現状のまま)でいいのですが、nx軸はコンテンツ(幅900px 中央揃え)の右下に来るように固定したいのですが、nその位置にもってくることはできたのですが、nie6でウィンドウのスクロールバーがウィンドウ内の900pxの縁にあらわれています。。。nまた、スクロールしているうちに、突然したにいくと bottom: 40px; right: 40px; が無効になるバグが発生しています。n説明がたりないですが、長くなりますので、説明はここまでで。。。nアドバイスできましたらよろしくお願いします。
2009年8月13日 18:57
2 - えど
さん
>>1 - gingami さんコメントありがとうございます。nちょっと状況が分かりづらいのですが、n推測してみると、もしかして #cover に対してwidth: 900px を設定していませんか?nこのテクニックは、#cover を通常の body 要素の "代わり" として使っています。nそのため、#cover はそのままで、さらにその内側に#wrap などの要素を追加して、それに幅を持たせてみてください。nできれば、サンプルなどの URL を教えてもらえると適切に回答できると思います。nバグに関してはちょっと実際にその現象が起きているものを見ないと分かりません;
2009年8月13日 19:17
3 - gingami さん
さっそくのアドバイスありがとうございます!nバグはこちらの記述ミスでした。解決しました。n失礼しました^^;n幅固定についてですが、coverの外側のタグに with:900pxいれてました。nご指示のとおりcoverの子にwrapをつくり、n以下のcssを修正・追加したところmac safariで希望通りの動作を確認しましたが、nie6だとスクロールと一緒に動いてくれなくなっちゃいました。。。n以下のcssをみていただけますか?n変更:n#fixedItem{width:350px;position: fixed !important;position: absolute;bottom: 80px; padding: 10px; padding-left:590px;}追加:n#wrap{width:900px; margin:auto; position:relative;}すいませんが、すぐにサンプルページをアップできません。nお時間ください。n
2009年8月13日 19:55
4 - えど
さん
>>3 - gingami さんバグは記述ミスだったみたいでちょっと安心しました・・wnスクロールと一緒に動いてくれない、というのはどこの部分でしょうか?n#wrap が、ということですか?nこちらでテストしたところ、n特に問題なく動いているようです。nやはり実際に問題が起きているものをアップしてもらわないとこれ以上の調査は難しいです;
2009年8月13日 21:30
5 - gingami さん
テストアップしました。nhttp://www.depth-vision.com/test.htmlお手数おかけして申し訳ないですが、たすかります^^;
2009年8月14日 12:51
6 - えど
さん
>>5 - gingami さん確認しました。nえぇと、内容としては固定配置したいものが、nIE6 では固定配置されなくなった、ということでしょうか?nそうであれば、固定配置用のボックスがn#cover 内に入っているためです。nスクロール操作を、#cover が代替して行っていて、nその外に置かれたものが固定配置される、という仕組みのためです。nなので、固定配置したいものをn#cover の外に置いてみてください。
2009年8月14日 13:49
7 - gingami さん
coverの外側においたら固定配置になりましたが、n固定配置したい黒枠は、背景グレーエリアの右下につねにくるようにしたいのでで黒枠をくくったらie6ではスクロールバーがでなくなりました。。。nまたみていただけますでしょうか?nhttp://www.depth-vision.com/test2.html
2009年8月14日 16:20
8 - えど
さん
>>7 - gingami さんどうやら #cover と指定されているのに、ncover が class になっているようです。nそれから、area_cart の親の div は必要ですか?nこれが悪さをしているようなので、nそれを消してから、area_cart をn#cover の下に配置したら黒枠が固定配置されました。nかなり色々指定されているみたいですが、nまずはこれで動く、というところから徐々に要素を足していくように作ると、nなにを追加したら動かなくなった、nというのが分かりやすいのでオススメです。
2009年8月14日 16:43
9 - gingami さん
classをidに直したら問題なくうごきました。n初歩的なミスですいませんでした。。。narea_cart の親の div は必要です。nグレーの背景の右側と黒枠の右側がそろったじょうたいで上下に動くようにしたかったので。nただし、nにして問題なくうごきました。height等はいれませんでした。nなにでおかしくなったかを検証するやりかたが確かにいいですね。n今後気をつけます。nありがとうございました。
2009年8月14日 17:46
10 - えど
さん
>>9 - gingami さん問題が解決したようでよかったです。nID と class って、なにげに修正していると間違えるんですよね・・。nあれ、なんで適用されないんだーってあわてるときがありますw
2009年8月14日 17:51
11 - gingami さん
お恥ずかしいかぎりです。。。nでもとにかくie6でのposition:fixed対応はとても勉強になりました。n(まだよくわかってない部分もありますが・・・)nまたのぞかせていただきます^^
2009年8月14日 18:09
12 - junpei kamiya さん
ありがとうござます。nとても参考になりました。n説明のしかたがわかりやすく、具体的に解説されていたので、n初心者の僕でも、すぐに理解できてよかったです。nサイトを公開しながら制作していきたかったので、nさっそく活用させていただきました。nhttp://maruka-fudousan.com/今後もこのサイトを利用させていただきます。
2010年1月27日 12:33
13 - えど
さん
>>12 - junpei kamiya さんコメントありがとうございます!nお役に立てたようでよかったです(*'-')ちょっと回りくどいやり方になってしまいますが、nIE6 対策がいらなくなるまでの辛抱ですね(;´д`)
2010年1月27日 12:45