Q. position: stickyが効かない

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

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

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

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

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

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

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

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