作成方法：粘性画像

CSSを使って粘性画像を作成する方法を学びます。

粘性画像

注意：この例はInternet ExplorerまたはEdge 15およびそれ以前のバージョンには適用されません。

自分で試してみてください

粘性画像

img.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

自分で試してみてください

設定されています position: sticky; の要素はユーザーのスクロール位置に応じて定位されます。

粘性要素は、スクロール位置に応じて相対定位と固定定位の間で切り替わります。視口内に指定されたオフセット位置に達するまで、相対定位になります - 然后それがその場所に「粘着」します（例えば、 position:fixed)

注意：Internet Explorer、Edge 15およびそれ以前のバージョンでは粘性定位はサポートされていません。Safariでは、 -webkit- プレフィックス（例を参照）。粘性定位が有効になるためには、少なくとも指定する必要があります top、right、bottom または left その中の1つ。

関連ページ

チュートリアル：CSS画像

チュートリアル：CSS定位