CSS آفسیٹ پوزیشن کا پرپرتی

تعریف اور استعمال

offset-position پرائیوٹ کا مقام عناصر کو منحرف مواضع پر ابتدائی مواضع طے کرتا ہے。

اگر پچھلے صفحے اگر 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: lavendar;
  text-align: center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

به طور شخصی امتحان کنید

نوع‌بندی CSS

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

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کاملاً پشتیبانی می‌کنند.

相关页面

SVG راستہمشارکت سائٹ

SVG راستہتعلیم:

CSS اینیمیشنCSS آفسیٹ کا پرپرتی

CSS اینیمیشنCSS آفسیٹ آنکر کا پرپرتی

CSS اینیمیشنCSS آفسیٹ دیسٹینس کا پرپرتی

CSS اینیمیشنCSS آفسیٹ پاتھ کا پرپرتی

CSS اینیمیشنCSS آفسیٹ رات کا پرپرتی