ویژگی offset-position CSS

صفحه قبل offset-path
صفحه بعدی offset-rotate

تعریف و استفاده

offset-position ویژگی تعیین‌کننده موقعیت اولیه عناصر در مسیر است.

اگر offset-path اگر تابع offset-position موقعیت اولیه خود را مشخص نکرده باشد، offset-position این مقدار تعیین‌کننده موقعیت اولیه عناصر در طول مسیر حرکت آن‌ها است.

مثال

مثال 1

موقع اولیه عناصر باید در گوشه پایین راست باشد:

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

خودتان امتحان کنید

مثال 2

نمایش موقعیت‌های مختلف شروع تغییرات:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

خودتان امتحان کنید

قوانین CSS

offset-position: auto|normal|position|initial|inherit;

مقدار ویژگی

مقدار	توضیح
normal	موقعیت شروع تغییرات را به 50% 50% از محتویات قرار می‌دهد. مقدار پیش‌فرض.
auto	موقعیت شروع تغییرات را به گوشه بالا چپ جعبه عنصر تنظیم می‌کند.
position	یک مقیاس x/y مشخص کنید و عنصر را در برابر لبه‌های جعبه خود قرار دهید. می‌توان از 1 تا 4 مقدار برای تعریف موقعیت استفاده کرد.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	normal
ارث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
قوانین جاوااسکریپت:	object.style.offsetPosition="auto"