Wiesselen op Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Positioun

Benotzt dës Shorthand Utilities fir séier d'Positioun vun engem Element ze konfiguréieren.

Positioun Wäerter

Schnell Positionéierungsklassen sinn verfügbar, obwuel se net reagéieren.

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

Arrangéiert Elementer

Arrangéiert Elementer einfach mat de Randpositionéierungs Utilities. D'Format ass {property}-{position}.

Wou Immobilie ee vun:

  • top- fir déi vertikal topPositioun
  • start- fir déi horizontal leftPositioun (am LTR)
  • bottom- fir déi vertikal bottomPositioun
  • end- fir déi horizontal rightPositioun (am LTR)

Wou Positioun ass eng vun:

  • 0- fir 0Rand Positioun
  • 50- fir 50%Rand Positioun
  • 100- fir 100%Rand Positioun

(Dir kënnt méi Positiounswäerter addéieren andeems Dir Entréen an d' $position-valuesSass Kaartvariabel bäidréit.)

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>

Zentrum Elementer

Zousätzlech, kënnt Dir och d'Elementer mat der Transformatioun Utility Klass zentréieren .translate-middle.

Dës Klass applizéiert d'Transformatiounen translateX(-50%)an translateY(-50%)d'Element, déi, a Kombinatioun mat de Randpositionéierungs-Utilities, Iech erlaabt en Element absolut ze zentréieren.

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>

Andeems Dir .translate-middle-xKlassen .translate-middle-yderbäi kënnt, kënnen Elementer nëmmen an horizontal oder vertikal Richtung positionéiert ginn.

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>

Beispiller

Hei sinn e puer real Liewen Beispiller vun dëse Klassen:

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>

Dir kënnt dës Klasse mat existéierende Komponenten benotze fir nei ze kreéieren. Denkt drun datt Dir seng Funktionalitéit verlängeren kënnt andeems Dir Entréen an d' $position-valuesVariabel bäidréit.

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

Kaarten

Standard Positioun Utility Wäerter ginn an enger Sass Kaart deklaréiert, dann benotzt fir eis Utilities ze generéieren.

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

Utilities API

Positioun Utilities sinn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

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