ヘッダーを固定したい

Question

HTML/CSS勉強中の初学者です。Webサイトを作成しているのですが、
ウィンドウサイズを狭めると以下の画像のようにヘッダーの要素が下にずれてしまいます。
※正常
![
※ズレ版

以下コード

 <header>
      <img src="logo.png" class="headline">
    <ul class="nav-list">
      <li class="nav-list-item">
        <a>Home</a>
      </li>
      <li class="nav-list-item">Works</li>
      <li class="nav-list-item">About</li>
      <li class="nav-list-item">Contact</li>
    </ul>
  </header>

  header {
    height: 100px;
    width: 100%;
    padding: 15px 0;
    background-color: #c12127;
    color:  #ffffff;
  }
  header .headline{
      float: left;
      margin-left: 100px;
  }
  .nav-list {
      line-height: 100px;
      float: left;
      margin-left: 30px;
      list-style: none;
  }
  .nav-list-item {
    list-style: none;
    display: inline-block;
    margin: 0 20px;
  }

ヘッダーの要素を固定するためにはどうすればよいでしょうか？
ヘッダーは上部固定のものではなく、スクロールすると見えなくなるものとして作成しています。
position fixedなども試してみましたが思った通りにいきませんでした。

Comments

[K_3578]

>position fixed
こちらではheaderにposition: fixed;としてheaderが固定されているのを確認しています。
position: fixedを試した時に書き方が誤っていたか、他のcssファイルでposition:fixedを上書きしていた
可能性があります

[012xx_]

こちらで再度試してみましたが上手くいきませんでした
どこが間違っているかすら理解出来ていないので該当GitHubページを添付しておきます
https://github.com/012xx/hibiki_officiel.github.io
良ければコードレビューしていただけると幸いです…

[K_3578]

私の方でindex.html,stylesheet.cssをコピペして実行してみましたが、特にheaderにposition:fixed;
は適用されていますし、固定されていないわけでも無いようです。キャッシュが残っていて、
position:fixed;を指定する前の物を見ている可能性はないですか？

[012xx_]

最新版を見ているのですがダメですね
headerにposition: fixed;を適応すると
・画像がヘッダーを隠してしまう
・フッターが何故か消える
という状態です…

[K_3578]

成程、大体状況を理解しました。

Answer 1

・画像がヘッダーを隠してしまう

これについてですが、z-indexを使い、画像の優先度をheader等より下げてやればいいです。

.image-vw {
  width: 100vw;
  position: absolute; //positionが規定値のstaticのままだとz-indexが効かないのでそれ以外にする
  z-index: 0; //これを追加
}

この場合、headerの方にもz-indexで.image-vwより優先度を上げておいてください。

・フッターが何故か消える

これに関してもデベロッパーツールなどで確認すればわかりますが、画像の後ろに隠れてしまっています。
position: absolute;とすれば表に出てくるかと。

Comments

[012xx_]

z-index,初めて知りました。
固定はまだ上手くいきませんが何とか試行錯誤してみます！
ご回答ありがとうございました！