position: stickyが効かない？使えない条件やposition: fixedとの違い。

公開日 : 2023.06.19

コーディング

こんにちは！
アンドエイチエーのコーディング部です。

本記事では、

position: sticky;の意味
position: sticky;とposition: fixed;の違い
position: sticky;が使えない条件

をご紹介します。

position: sticky; とは？

position: sticky;とは、とある要素をスクロールした際に、指定した位置に貼り付ける（＝スティッキー）ことのできる便利なCSSプロパティです。

position: sticky;の要素が指定の位置を満たすとページの要素から”外れた”ような状態となるため、あたかも指定した位置で固定されたようになります。

position: fixed; の違い

position: sticky;よく似ていると言われるCSSとして、position: fixed;があります。
これら２つの違いは下記です。

position: fixed;
親要素に関係なく、画面全体上で決めた位置に固定される。
position: sticky;
親要素内の決まった位置で固定される。

以下は、position: stick;とposition: fixed;の両方が適用されている例です。
スクロールしてみてください！

See the Pen fixed + sticky by bibomato (@bibomato) on CodePen.

position: sticky; が効かない条件

position: sticky;が効かない条件として、overflow: hidden;と一緒に使用する場合です。

以下は、position: sticky;が効かない例です。

See the Pen fixed + sticky overflow hidden by bibomato (@bibomato) on CodePen.

使えない理由

これらはバグではありません。

簡単に言うと、position: sticky;とoverflow: hidden;は共存できないCSS同士だからです。

詳しく説明すると、親要素や祖先要素に対してoverflow: hidden;を使うと、 position: sticky;を付与している子要素が”無効化”されてしまいます。

もっと言えば、position: sticky;の子要素は、スクロール可能な親要素に張り付く（親を軸に固定される）ような状態となりますが、overflow:hidden;を使うと親要素がスクロールされない対象となるので、くっついている子要素は自分の今いる位置が正しいと判断し、固定してくれない状態になります。