CSS で固定上部に固定するナビバーを作成する方法

✏️️ 2019/08/22 👍️2019/08/22 🔗

CSS で固定上部に固定するナビバーを作成します。

HTML

<body>
  <nav class="sticky-navbar">
  <!-- ナビバー -->
  </nav>
</body>

CSS

.sticky-navbar {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index: 100;
}

position: sticky; : 親要素の端に達すると、その要素は自然な位置で止まります
z-index: z軸方向の重なり順序を指定します。最大値は2147483647

参考

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。