[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;
}

使用後

無事に、固定されるようになった。