position:stickyを指定するとその要素は兄弟要素のスクロールが続く限り画面に固定されます。
凄く便利な機能ですが、要素が固定されない時があります。
この記事ではposition:stickyを指定しているのに要素が固定されない原因と解決方法をご紹介したいと思います。

親・先祖要素にoverflow:hiddenが指定してある

親要素や先祖要素にoverflow:hiddenが指定してあるとposition:stickyを指定しても要素が固定されません。
親要素だけでなく、先祖要素含めてoverflow:hiddenが影響してくるので注意が必要です。

overflow:hiddenが指定した場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定しているのに固定されませんね。

そしてoverflow:hiddenの指定を消した場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定している要素が固定されましたね。

position:stickyで固定されない場合、一番可能性が高いのはこれだと思います。
まずは親要素や先祖要素にoverflow:hiddenが指定されていないか確認してみましょう。

display:flexの影響で高さが同じになっている

要素を横並びにする際によく使用するのがdisplay:flexですね。この指定をするとデフォルトでalign-items:stretchが指定されます。
この指定があると横並び要素の高さは一番高いもの自動で揃うようになります。
高さが揃っていると固定化されることはありません。
背景色がついていなかったりして境目が分からないと、このパターンが原因でposition:stickyが指定されているのに固定されないと悩んでしまうかもしれないですね。

display:flexを指定しただけの状態の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定しているのに固定されませんね。

position:stickyを指定した要素に背景色をつけてみるとこのような高さになっています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

背景色を付けてみると分かりやすいですね。

そしてdisplay:flexとalign-items:flex-startを指定した場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定している要素が固定されましたね。

ポジション指定がない

position:stickyを指定しただけでは要素は固定されません。
縦スクロールに合わせて上部に固定するのであれば、top: 数値を指定する必要があります。

ポジション指定がない場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定しているのに固定されませんね。

そしてtop: 数値を指定した場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position:stickyを指定している要素が固定されましたね。

まとめ

いかがでしたか？
position:stickyを指定しているのに要素が固定されない原因はいくつか考えられます。
もし固定されない場合は、今回ご紹介した原因をひとつづつ確認してみて下さい。
きっとどれか当てはまるものがあるはずです。