Q. 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と同様の挙動をする。