デザイン
2021.07.07
fixedとstickyの違いって?
固定ヘッダー・フッターや、追尾ボタンなどにも使用できる
CSSのpositionプロパティ、fixedとstickyについて解説します。
fixedもstickyも共に「位置を固定する」プロパティですが
それぞれ仕様が若干異なります。
コンテンツ
・position:fixed;の仕様
ウィンドウの左上を基準にした絶対位置に配置されます。
固定ヘッダーを作る時はこのようなソースになりますね。
header {
position: fixed;
z-index: 999;
}
【fixed注意点】高さが無くなる
fixedを指定したコンテンツは高さが無くなるため
後に続く要素が下に埋もれてしまいます。
特にheaderに指定するとFVの一部がheaderに埋もれてしまう事も。。。
この場合
FVコンテンツにpadding等でheaderの高さ分余白をとると疑似的に回避できます。
・position:sticky;の仕様
fixedと大きく異なる点として
①親要素内で固定される
fixedがウィンドウ全体を基準にしているのに対し、
stickyは親要素の幅、高さを基準に固定されます。
※stickyを指定した要素をスティッキーアイテム、その親要素をスティッキーコンテナとも呼びます。
②高さが無くならない
先ほどfixedでは高さが無くなってしまうため、後続のコンテンツに余白を設ける必要がありましたが
高さは保持したままなので、余白等の指定は要りません、
stickyで固定ヘッダーを作るとこのようなソースになります。
header {
position: sticky;
z-index: 999;
top: 0;
}
【sticky注意点1】位置の指定が必須
fixedと違い、スクロールした時に親要素のどこに固定されるか位置の指定が必須です。
stickyを指定したけど固定されてない!という時は
まず位置指定が抜けてないかをチェックしましょう。
top、bottomは縦スクロール時の固定位置、left、rightは横スクロール時の固定位置になります。
固定ヘッダーのように画面上部に固定する時はtop:0;の指定でOKです。
【sticky注意点2】overflowと共存できない
親要素(スティッキーコンテナ)に
overflow:hidden;、overflow:auto;があるとstickyが効きません。
まとめ
サイト制作においてpositionは重要です。
どちらも状況に応じて使い分けられるようになりましょう!
この記事に関連するタグ
正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。