会社のはなし

【CSS】position: stickyが効かない、固定できない時の注意点

Avatar photo
2022.11.11
Posted by Okumura

こんにちは。フロントエンドエンジニアの奥村です。

JS(JavaScript・jQuery)を使わないで、スクロールの途中で要素を固定できる便利なCSSプロパティ、position: stickyを使用する際の注意点をまとめたいと思います。

親・祖先要素にoverflow: hiddenを指定している

親要素だけでなく、祖先要素にoverflow: hiddenを指定している場合は固定化できません。
overflow: hiddenは、はみ出した要素を表示上カットする際に使用されることがあります。祖先要素を辿ってチェックしてみましょう。

実際に経験した見落としポイントでした。

高さの差がない

display: flexで横並びにした場合、初期値のままではフレックスアイテム同士の高さが揃ったままになりがちです。高さが揃ったままだと固定化できません。
align-items: flex-startheight指定などでフレックスアイテム毎の高さを出すようにしましょう。

フレックスアイテムに背景色を指定すると、高さがどうなっているか視覚化できます。

ポジション指定がない

top、botom、right、left」のポジション指定がないと固定化できません。
top: 0など、ブラウザのどこに固定化したいか指定しましよう。

<table> 要素の列などを横スクロールで固定化する場合には、「left、right」プロパティを指定します。

まとめ

IE11のサポート終了によって、便利なCSSプロパティが使用しやすくなりました。
簡単指定でも他プロパティとの組み合わせが悪いと、「あれっ?」となってしまいます。見落とさないように注意しましょう(自戒)。

はじめて制作会社に
依頼される方へ

「何から手をつけていいかわからない」、「WEBのことってよく分からない」
そんな方にも、丁寧にご説明いたします。

CONTACT

お問い合わせ

お問い合わせ、お仕事のご依頼、お見積もりなど
まずはお気軽にご相談ください。

tel. 0857-30-3100

受付時間/平日 9:00〜17:30(土日祝除く)