【CSS】position stickyが効かないときの対処法

position stickyは、それを指定した要素だけでなく「親」や「祖先」の要素によって挙動が左右されることがあります。

position: sticky; は、一部の要素だけを固定することができる比較的新しいCSSプロパティです。

position: fixed; との違いは、fixedを指定した要素を常に画面に対して固定位置に表示するのに対し、
position: stickyを指定した要素を、その「ひとつ親の要素」が画面にスクロールされている間だけ、固定する というものです。

エクセルやスプレッドシートの「行を固定」のようなことをしたい場合に役立ちます。

そもそも、画面をスクロールするほどコンテンツが長くなければ、stickyは役に立ちません。
position: stickyを付与した親の要素が、トップまで辿り着いてからすべて隠れてしまうまでの間、stickyの要素が固定されるので、
親要素がすべて隠れてしまう位の十分なスクロール量があることが必要です。

固定したい要素にposition: sticky;をつけ、さらに
top: 10px;など固定したい位置も忘れずに指定します。

要素がたくさん重なるページでは、祖先の要素（例えばbody要素も）にoverflowの指定することもありえます。
親だけでなく祖先にこれがあるとposition: stickyは動きません。どうしても固定されない時は、エディタの検索で
overflow: hiddenやoverflow: scrollがないか探してみましょう。私はこれで2時間は潰しました。