Q. position: stickyが効かない

2024年5月14日

position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。

Table of Contents

position: stickyが効かないという質問を受けることが年に数回はある。

以前はtheadなどの要素に対してposition: stickyが効かないという問題があったが、現在はほとんどのブラウザで対応されている。

この質問が発生する場合、position: stickyが粘着できる対象が分かっていないことが多い。

`position: sticky`が粘着する要素

overflowがvisible以外の直近の祖先要素に対してposition: stickyが指定されている要素は粘着する。

<div style="overflow: auto;">
  <div style="position: sticky; top: 0;">
    <!-- 粘着する -->
  </div>
</div>

該当する要素が存在しない場合、position: stickyはviewportに対して粘着する。

また、position: stickyの要素はスクロールが発生する軸方向に対応したtopやrightなどの指定も必要である。これらの指定がない場合、position: relativeと同様の挙動をする。