ヘッダーを固定する方法
Category:CSS    投稿日:2012年02月05日
このエントリーをはてなブックマークに追加
▼概要

 facebookのヘッダーのようにスクロールしても動かないヘッダーの作り方を説明します。

 

▼説明

cssに下記のようなプログラムを記述します。

div#header {
    width: 100%; /*ヘッダーの横幅に隙間ができないように設定*/
    position: fixed; /*スクロールしても固定されたままに設定*/
    z-index: 99; /*重なりの順序を整数で設定*/
}

 

 上記のプログラムを加えるだけで、ヘッダーを固定することができます。

 

 動作確認ブラウザ:IE7, Chrome16, FireFox10, Opera11
 IE6は、上記のプログラム以外にもプログラムを記述しなければいけなかった気がします。まだ確認していません。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です