پوزيشن

عنصر جي پوزيشن کي تيزيءَ سان ترتيب ڏيڻ لاءِ ھي شارٽ ھينڊ يوٽيلٽيز استعمال ڪريو.

هن صفحي تي

پوزيشن جا قدر

تڪڙو پوزيشن ڪلاس موجود آهن، جيتوڻيڪ اهي جوابدار نه آهن.

<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ساس نقشي جي متغير ۾.)

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>

ساس

نقشا

ڊفالٽ پوزيشن افاديت جي قيمتن کي Sass نقشي ۾ بيان ڪيو ويو آھي، پوء اسان جي افاديت پيدا ڪرڻ لاء استعمال ڪيو ويندو آھي.

$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%),
      )
    ),