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

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

تصویر چسبنده

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

آزمایش کنید

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

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

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

相关页面

教程：CSS 图像

教程：CSS 定位