[CSS] ヘッダーを上部に固定する方法

ホームページ作成

# #

ヘッダーを固定させるための備忘録。

最初にヘッダーを作ると、固定されていないので、スクロールした時にヘッダーが消えてしまう。

これをスクロールしても上部に固定させるようにする。



position: fixed;とz-indexを使用

position: fixed;とz-indexを使用することで固定できる。

z-indexは高さを表してる。

z-indexを使わないと、ヘッダーの上に写真やその他要素が重なってしまう形になる。


header{
  height:70px;
  background-color:white;
  position: fixed;
  width: 100%;
  z-index:1;
}


position fixed とposition absoluteの使い分け

position fixedはスクロールしても場所が変わらないように位置を指定することができる。

一方でabsoluteを使うと、画像などの要素の上に文字などをおくことができ、スクロールすると画像と一緒にスクロールされるようになる。

イメージとしては、下記のように使い分けができる。


使い分けに関しては、下記に書いた。

no image
[CSS] position fixedとposition absoluteの使い方

続きを見る


HTMLサイトの作り方のまとめ記事はこちら。

HTMLとCSS、Javascriptを使ったwebサイトの作り方まとめ

続きを見る

Related posts