Esika

Salelá ba utilitaires oyo ya stenographie mpo na ko configurer noki position ya élément moko.

Na lokasa oyo

Mituya ya esika

Ba kelasi ya positionnement ya mbangu ezali, atako ezali ko répondre te.

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

Bongisá biloko oyo ezali na kati

Bongisa ba éléments facilement na ba utilitaires ya positionnement ya bord. Format na yango ezali {property}-{position}.

Epayi wapi biloko ezali moko ya:

toptop- mpo na position verticale
start- mpo na position horizontale left(na LTR) .
bottombottom- mpo na position verticale
end- mpo na position horizontale right(na LTR) .

Epayi wapi position ezali moko ya:

0- mpo 0na position ya bord
50- mpo 50%na position ya bord
100- mpo 100%na position ya bord

(Okoki kobakisa ba valeurs ya position mingi na kobakisa ba entrées na $position-valuesvariable ya carte 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>

Ba éléments ya centre

En plus, okoki pe ko centrer ba éléments na classe ya utilitaire transformer .translate-middle.

Classe oyo e appliquer ba transformations translateX(-50%)mpe translateY(-50%)na élément oyo, en combinaison na ba utilitaires ya positionnement ya bord, e permettre yo o centrer absolument élément moko.

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>

Na kobakisa .translate-middle-xto .translate-middle-yba classes, ba éléments ekoki kozala positionné kaka na direction horizontale to verticale.

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>

Bandakisa

Talá mwa bandakisa ya bomoi ya solosolo ya bakelasi yango:

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>

Okoki kosalela ba classes oyo na ba composants oyo ezali pona kosala ya sika. Kobosana te ete okoki kobakisa mosala na yango na kobakisa ba entrées na $position-valuesvariable.

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

Bakarte

Ba valeurs ya utilitaires ya position par défaut e déclaré na carte ya Sass, sima esalelamaka pona ko générer ba utilitaires na biso.

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

API ya ba utilitaires

Ba utilitaires ya position esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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