چگونه ایجاد شود: تصویر چسبنده

آموزش نحوه استفاده از CSS برای ایجاد تصویر چسبنده.

تصویر چسبنده

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

آزمایش کنید

تنظیم شده است position: sticky; عناصر

عناصر چسبنده بین قرارگیری نسبی و قرارگیری ثابت جابجا می‌شوند، بسته به موقعیت اسکرول. قبل از اینکه در دیدگاه به موقعیت حرکت داده شده‌ای برسد، آن را به قرارگیری نسبی خواهد بود - سپس آن در همان مکان "چسبیده" خواهد ماند (مانند position:fixed)

توجه:Internet Explorer، Edge 15 و نسخه‌های قبلی آن از قرارگیری چسبنده پشتیبانی نمی‌کنند. Safari نیاز به یک -webkit- پیشوند (مثال ببینید). برای اینکه قرارگیری چسبنده مؤثر باشد، باید حداقل بالایوسمت راستوپایین یا چپ در میان یکی از آنها.

صفحات مرتبط

آموزش:تصویر CSS

آموزش:چیدمان CSS - ویژگی position