positionの5種類を、同じ箱で比べる

黄緑色が対象。A・対象・Cの順序と、スクロール中の位置を観察します。枠は独立したページです。fixedの基準は、この枠の表示領域になります。

枠の中はホイール・タッチ・キーボードでもスクロールできます。ボタンは枠の中だけを移動します。fixedにはtransformなどの基準を変える祖先を置いていません。

現在の指定

.target {
  position: static;
  top: 24px;
  left: 32px;
}

relativeとstickyは元の領域を残します。absoluteとfixedではCがAの直後へ移動します。stickyを選び、260pxと親の終端を比較すると、留まる期間と離れる位置を確認できます。