マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > fixedとstickyの違いって?

Mighty Ace Blog

マイティーBlog

デザイン

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アナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.