Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Say

Yuz dɛn shɔthand yutiliti ya fɔ kɔnfigyut di pozishɔn fɔ wan ɛlimɛnt kwik kwik wan.

Na dis pej

Pozishɔn valyu dɛn

Kwik pozishɔn klas dɛn de, pan ɔl we dɛn nɔ de ansa.

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

Arenj di ɛlimɛnt dɛn

Arenj elemɛnt dɛn izi wan wit di ɛj pozishɔn yutiliti dɛn. Di fɔmat na {property}-{position}.

Usay prɔpati na wan pan:

  • top- fɔ di vertikal toppozishɔn
  • start- fɔ di ɔrizɔntal leftpozishɔn (insay LTR) .
  • bottom- fɔ di vertikal bottompozishɔn
  • end- fɔ di ɔrizɔntal rightpozishɔn (insay LTR) .

Usay pozishɔn na wan pan:

  • 0- fɔ 0ed pozishɔn
  • 50- fɔ 50%ed pozishɔn
  • 100- fɔ 100%ed pozishɔn

(Yu kin ad mɔ pozishɔn valyu dɛn bay we yu ad ɛntri dɛn to di $position-valuesSass map vɛriɔbul.)

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

Sɛntral ɛlimɛnt dɛn

Apat frɔm dat, yu kin sɛnt di ɛlimɛnt dɛn bak wit di transfɔm yutiliti klas .translate-middle.

Dis klas de aplay di transfɔmeshɔn translateX(-50%)dɛn ɛn translateY(-50%)to di ɛlimɛnt we, in kɔmbaynshɔn wit di edj pozishɔn yutiliti dɛn, de alaw yu fɔ absɔlɔb sɛnt wan ɛlimɛnt.

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

We dɛn ad .translate-middle-xɔ .translate-middle-yklas, dɛn kin put ɛlimɛnt dɛn nɔmɔ na ɔrizɔntal ɔ vertikal dairekshɔn.

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

Ɛgzampul dɛn

Na sɔm rial layf ɛgzampul dɛn bɔt dɛn klas ya:

<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 bi bi-caret-down-fill" 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>

Yu kin yuz dɛn klas ya wit di kɔmpɔnɛnt dɛn we dɔn de fɔ mek nyu wan dɛn. Mɛmba se yu kin ɛkstɛnd in wok bay we yu ad ɛntri dɛn to di $position-valuesvɛriɔbul.

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" 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 we bin de

Map dɛn

Difɔlt pozishɔn yutiliti valyu dɛn de diklar insay wan Sass map, dɔn dɛn kin yuz dɛn fɔ jenarayz wi yutiliti dɛn.

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

Yutiliti dɛn API

Pozishɔn yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn 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%),
      )
    ),