الموضع (Position)

استخدم هذه المساعدات المختصرة لتهيئة موضع عنصر ما بسرعة.

في هذه الصفحة

قيم الموضع (Position values)

تتوفر فئات (classes) تحديد الموضع السريعة، على الرغم من أنها ليست متوافقة مع الشاشات (Responsive).

<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%

(يمكنك إضافة المزيد من قيم التموضع بإضافة إدخالات إلى متغير الخريطة (map) الخاص بـ Sass وهو $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>

توسيط العناصر

بالإضافة إلى ذلك، يمكنك أيضاً توسيط العناصر باستخدام فئة (class) المساعدة للتحويل .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>

من خلال إضافة الفئات (classes) .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>

أمثلة

إليك بعض الأمثلة الواقعية لهذه الفئات (classes):

Marker

html

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

<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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>
</div>

<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>

يمكنك استخدام هذه الفئات (classes) مع المكونات الموجودة لإنشاء مكونات جديدة. تذكر أنه يمكنك توسيع وظائفها عن طريق إضافة إدخالات إلى المتغير $position-values.

html

<div class="position-relative m-4">
  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%"></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>

الـ (CSS)

خرائط الـ (Sass)

يتم التصريح عن قيم أدوات الموضع الافتراضية في خريطة (map) الـ Sass، ثم تُستخدم لإنشاء الأدوات الخاصة بنا.

scss/_variables.scss

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

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات الموضع في الـ API الخاصة بالأدوات في scss/_utilities.scss. تعلم كيفية استخدام الـ API الخاصة بالأدوات.

scss/_utilities.scss

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