CSSでヘッダーを常に画面上部に固定表示する方法/position:fixedの使い方

people IT

画面を下に下にスクロールしていっても、常についてくるヘッダーメニューの実装方法です。

Advertisements

position:fixedの使い方

positionプロパティは要素の位置が絶対位置か相対位置かを決定します。fixedは絶対位置であると同時に、画面の決まった位置に要素を固定したい時に使用します。

要素を決まった位置に固定
position:fixed;
※top、leftなどで固定する座標の指定が可能

というわけで、上に小さーくヘッダーをつけていますが、おわかりになるでしょうか……。
ブラウザで見ると左側切れてますけど、テーマの親要素がそこからスタートしている関係でこうなっているようです。すいませんがスルーしてください。

/*CSS*/
#upper{
position:fixed;
top:0;
left:0;
background-color:#f7f7f7;
z-index:100;
width:100%;
height:40px;
opacity:0.5;
border-bottom:dotted 1px grey;
}

z-indexの使い方

position:fixedにした時、要素と要素が重なることになりますが、この時「どちらを表示するか」(どちらが上にあるか)を判別する必要があります。この高低は、単純に「z-indexの値が大きいほうが上にある」として処理されます。もしスクロールしたヘッダーがボタンの下に潜り込んだりする場合には、z-indexの値を増やしてあげてください。

要素の高低
z-index:値;
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント