`position: sticky`は、ページをスクロールしたときに、特定の位置に達すると要素を固定するためのものです。要素がスクロール可能なコンテナの親要素に`position: relative`または`position: absolute`が指定されている必要があります。
## 例1: スクロール時にヘッダーの固定ユーザーがスクロールした際に、テーブルヘッダーを決められた範囲内で固定することができます。 ~~~html-preview~index

商品名	価格	在庫状況
りんご	100円	在庫あり
バナナ	80円	在庫あり
みかん	120円	在庫切れ
パイナップル	500円	在庫あり

テーブルの範囲外です。

~~~ この例では、テーブルのヘッダー部分がテーブルの範囲内でスクロールしても画面の上部に固定されるようになっています。
## `position:sticky`が効かないときには以下を確認してみてましょう。

💡 親・祖先要素の設定をチェック！

親・祖先要素が overflow: hidden;、overflow: scroll;、または overflow: auto;になっている場合、sticky要素はその範囲内でのみ動作します。 ~~~html~index

これが動かない！

~~~

解決方法

親・祖先要素のoverflowをvisibleにするか、stickyが動く範囲を考慮して調整しましょう。

💡 スクロールする範囲（高さや横幅）は足りていますか？

stickyは動きの範囲を親要素の高さに基づいて決めます。もし親要素の高さが小さかったり、heightが明確に設定されてなかったりすると動きません。 ~~~html~index

高さが足りません！

~~~

解決方法

親要素の高さを十分に大きくするか、スクロールできるレイアウトに変更します。

💡 top, bottom, left,right が指定されていますか？

stickyを指定した要素にはtop、bottom、left、rightのいずれかの値を設定する必要があります。指定がない場合、sticky は動作しません。 ~~~html~index

これだけでは動きません！

~~~

解決方法

topなどの位置を必ず指定します。

この順番で確認してみてください！