スクロール位置に応じて、通常のフローとfixedの間で切り替わる配置方法です。指定した位置に到達するまで通常配置、到達後は固定されます。
position: sticky; top | right | bottom | left: <length>一般形: sticky + top-{n}(top等の指定が必須)
クラス自体は position の項の sticky。効かないときは祖先の overflow を疑う。
position: sticky; top: 0;上端に到達したら固定
position: sticky; top: 20px;上から20pxの位置で固定
親要素にoverflow: hiddenがあると動作しない
stickyが効かない三大原因は「祖先のoverflow: hidden/auto」「top等の閾値未指定」「親の高さ不足(貼り付く余地がない)」です。AIは症状からこの三択に絞り込めないことが多いので、原因調査はこの順で依頼すると速いです。table のヘッダー行(th)にも使える点は意外と知られていません。
このposition: stickyが効かない原因を、祖先のoverflow・閾値・親の高さの3点から順に調査して
テーブルのヘッダー行をスクロールで固定して。stickyをthに使う方法で
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。