CSS لگتار - position کیویسی

position کمپوزیشن مقرر برای روش تعیین موقعیت عناصر (ثابت، نسبی، ثابت، مطلق یا چسبنده) است.

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

这个
元素设置了 position: static;

یہ استعمال کئے جانے والا سی ایس ایس ہے:

مثال

div.static {
  position: static;
  height: 100px;
}

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

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

یہ <div> علامت position: relative; سے سیٹ کی گئی ہے;

یہ استعمال کئے جانے والا سی ایس ایس ہے:

مثال

div.relative {
  position: relative;
  left: 30px;
  height: 100px;
}

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

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS：

مثال

div.fixed {
  position: fixed;
  bottom: 0;
  top: 80px;
  width: 300px;
  height: 100px;
}

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

یہ <div> علامت position: fixed; سے سیٹ کی گئی ہے;

position: absolute;

position: absolute; علامت کی مقام کاری، نزدیک ترین مقام وقوع کی علامت کے لئے ہوتی ہے (دراصل ویو پورٹ پر مقام وقوع، جیسا کہ fixed)۔

تاہم، اگر مضبوط مقام وقوع کی علامت کو نہیں ملا، تو وہ ڈاکومن کی بنیادی شکل (بادی) کو استعمال کرے گا اور صفحے کی رولنگ کے ساتھ رول میگا۔

توجه:“محل وقوع” علامت اس کی مقام کی منقسم کاری کا حامل ہے، static بیرونی کسی بھی علامت کے لئے。

یہ ایک سادا مثال ہے:

یہ <div> علامت position: relative; سے سیٹ کی گئی ہے;
یہ <div> علامت position: absolute; سے سیٹ کی گئی ہے;

یہ استعمال کئے جانے والا سی ایس ایس ہے:

مثال

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  height: 100px;
} 
height: 200px;
  position: absolute;
  div.absolute {
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
}

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

position: sticky;

position: sticky; عناصر با border: 3px solid #73AD21;

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

توجه:Internet Explorer، Edge 15 و نسخه‌های قبلی آن‌ها از قرارگیری چسبنده پشتیبانی نمی‌کنند. Safari نیاز به پیشوند -webkit- دارد (لطفاً مثال زیر را ببینید). شما باید حداقل یکی از آن‌ها را مشخص کنید topوrightوbottom یا left یکی از آن‌ها، تا اینکه در دیدگاه مناسب به موقعیت مشخص شده برسد - سپس به موقعیت مناسب "چسبیده" می‌شود (مثلاً position:fixed).

در این مثال، در زمانی که به موقعیت اسکرول می‌رسد، عنصر sticky در بالای صفحه باقی می‌ماند (top: 0）。

مثال

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

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

عناصر بر هم قرار دارند

در هنگام قرارگیری عناصر، می‌توانند با دیگر عناصر بر هم قرار دارند.

z-index خصوصیات مشخص می‌کند که ترتیب قرارگیری عنصر چیست (کدام عنصر باید جلوی یا پشت دیگر عناصر قرار گیرد).

عناصر می‌توانند ترتیب قرارگیری مثبت یا منفی را تنظیم کنند:

این یک عنوان است

به دلیل اینکه z-index تصویر -1 است، بنابراین در پشت متن قرار دارد.

مثال

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

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

عناصر با ترتیب قرارگیری بالاتر همیشه قبل از عناصر با ترتیب قرارگیری پایین‌تر قرار دارند.

توجه:اگر دو عنصر قرارگیری دوگانه‌ای بر هم قرار دارند و مشخص نشده‌اند z-indexاگر در HTML کد، عناصر قرارگیری دوگانه‌ای بدون مشخص کردن

تنظیم متن در تصویر

چگونه می‌توانم متن را روی تصویر قرار دهم؟

مثال

CodeW3C.com لوگو
سفاردهای پایین سمت چپ
سفاردهای بالا سمت چپ
سفاردهای بالا سمت راست
سفاردهای پایین سمت راست
مرکز شده

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

سفاردهای بالا سمت چپ سفاردهای بالا سمت راست سفاردهای پایین سمت چپ سفاردهای پایین سمت راست مرکز شده

مثال‌های بیشتر

تنظیم شکل عنصر
این مثال نشان می‌دهد که چگونه می‌توان شکل یک عنصر را تنظیم کرد. عنصر به این شکل برش داده شده و نمایش داده می‌شود.

تمام خصوصیات CSS قرارگیری

خصوصیات وصف
bottom ترتیب کمر بند کف کادر محدودیت.
clip عناصر قرارگیری مطلق را برش می‌دهد.
left حاشیه چپ کنترل‌کننده قرارگیری را تنظیم می‌کند.
position نوع قرارگیری عنصر را مشخص می‌کند.
right حاشیه راست کنترل‌کننده قرارگیری را تنظیم می‌کند.
top حاشیه بالای کنترل‌کننده قرارگیری را تنظیم می‌کند.
z-index ترتیب قرارگیری عناصر را تنظیم می‌کند.

خواندن بیشتر

کتاب درسی:مقدمه‌ای بر قرارگیری CSS

کتاب درسی:قرارگیری نسبی CSS

کتاب درسی:قرارگیری مطلق CSS