مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

پوزیشن

کسی عنصر کی پوزیشن کو تیزی سے ترتیب دینے کے لیے ان شارٹ ہینڈ یوٹیلیٹیز کا استعمال کریں۔

اس صفحہ پر

پوزیشن کی اقدار

فوری پوزیشننگ کلاسز دستیاب ہیں، حالانکہ وہ جوابدہ نہیں ہیں۔

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

عناصر کو ترتیب دیں۔

ایج پوزیشننگ یوٹیلیٹیز کے ساتھ عناصر کو آسانی سے ترتیب دیں۔ فارمیٹ ہے {property}-{position}۔

جہاں جائیداد میں سے ایک ہے:

  • top- عمودی topپوزیشن کے لئے
  • start- افقی leftپوزیشن کے لیے (LTR میں)
  • bottom- عمودی bottomپوزیشن کے لئے
  • end- افقی rightپوزیشن کے لیے (LTR میں)

جہاں پوزیشن میں سے ایک ہے:

  • 0- 0کنارے کی پوزیشن کے لئے
  • 50- 50%کنارے کی پوزیشن کے لئے
  • 100- 100%کنارے کی پوزیشن کے لئے

$position-values(آپ Sass نقشہ متغیر میں اندراجات شامل کرکے پوزیشن کی مزید قدریں شامل کر سکتے ہیں ۔)

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

مرکزی عناصر

اس کے علاوہ، آپ ٹرانسفارم یوٹیلیٹی کلاس کے ساتھ عناصر کو سینٹر بھی کر سکتے ہیں .translate-middle۔

یہ کلاس تبدیلیوں translateX(-50%)اور translateY(-50%)اس عنصر پر لاگو ہوتی ہے جو، کنارے کی پوزیشننگ افادیت کے ساتھ مل کر، آپ کو کسی عنصر کو مطلق مرکز کرنے کی اجازت دیتی ہے۔

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

جوڑ کر .translate-middle-xیا .translate-middle-yکلاس کر کے، عناصر کو صرف افقی یا عمودی سمت میں رکھا جا سکتا ہے۔

html 
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

مثالیں

یہاں ان کلاسوں کی کچھ حقیقی زندگی کی مثالیں ہیں:

html 
<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

آپ ان کلاسوں کو موجودہ اجزاء کے ساتھ استعمال کرکے نئی تخلیق کرسکتے ہیں۔ یاد رکھیں کہ آپ $position-valuesمتغیر میں اندراجات شامل کرکے اس کی فعالیت کو بڑھا سکتے ہیں۔

html 
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

سس

نقشے

ڈیفالٹ پوزیشن یوٹیلیٹی ویلیوز کا اعلان ساس میپ میں کیا جاتا ہے، پھر ہماری یوٹیلیٹیز بنانے کے لیے استعمال کیا جاتا ہے۔

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

یوٹیلیٹیز API

پوزیشن کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔

    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    "top": (
      property: top,
      values: $position-values
    ),
    "bottom": (
      property: bottom,
      values: $position-values
    ),
    "start": (
      property: left,
      class: start,
      values: $position-values
    ),
    "end": (
      property: right,
      class: end,
      values: $position-values
    ),
    "translate-middle": (
      property: transform,
      class: translate-middle,
      values: (
        null: translate(-50%, -50%),
        x: translateX(-50%),
        y: translateY(-50%),
      )
    ),