画面を下に下にスクロールしていっても、常についてくるヘッダーメニューの実装方法です。
position:fixedの使い方
positionプロパティは要素の位置が絶対位置か相対位置かを決定します。fixedは絶対位置であると同時に、画面の決まった位置に要素を固定したい時に使用します。
要素を決まった位置に固定
position:fixed;
※top、leftなどで固定する座標の指定が可能
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:値;
z-index:値;
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。
sunagitsune.com
2019.01.27
コメント