「画面をスクロールしたときにヘッダーを上部に固定したい」
そんな時はposition:fixed;を使うと思います。このfixedによく似たプロパティ「position:sticky」というのがあるのをご存知ですか？
fixedとsticeyの違いも含めて解説します！
Contents
position:fixed;の意味
fixedは親要素に関係なく、
画面の左上を基準にした絶対位置に配置されます。
この時の注意点は、fixedを指定された要素には高さがなくなるということ。
ヘッダーの中のグローバルメニューをflexで横並びにすると、親のヘッダーに高さが無いので、思った場所に配置されない場合があります。（今回私はこれでハマりました。）
position:sticky;の意味
stickyがfixedと大きく違うのは、
親要素の幅、高さを基準に固定されるということ。
この時、styicyを与えた要素の高さは無くなりません。
stickyを振った要素には必ず位置を指定する
stickyを指示した要素には、top、bottomなどを使用して、親要素に対してどこに固定したいのかを指示する必要があります。
例えば固定したいヘッダーにstickyを振った場合には、一緒に「top: 0;」も必要！
stickyにしたのに固定されていない場合は位置の指定もしたか確認してみてください。
stickyコンテナ内でoverflowは共存できない
コンテナ内にoverflowプロパティがあると、stickyが効きません。
stickyが効かない時はこちらも確認してみてください！
用途に応じてうまく使いこなそう！
positionはとてもよく使うCSSですので、それぞれの意味を理解して、正しく使いこなせるようにしましょう。
positionを使えるようになると、デザインの幅もグッと広まりますよ！
