Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Positie

Gebruik deze verkorte hulpprogramma's om snel de positie van een element te configureren.

Positiewaarden

Er zijn lessen voor snelle positionering beschikbaar, maar deze reageren niet.

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

Elementen rangschikken

Rangschik elementen eenvoudig met de randpositioneringshulpprogramma's. Het formaat is {property}-{position}.

Waar eigendom is een van:

  • top- voor de verticale toppositie
  • start- voor de horizontale leftpositie (in LTR)
  • bottom- voor de verticale bottompositie
  • end- voor de horizontale rightpositie (in LTR)

Waar positie is een van:

  • 0- voor 0randpositie
  • 50- voor 50%randpositie
  • 100- voor 100%randpositie

(U kunt meer positiewaarden toevoegen door items toe te voegen aan de $position-valuesSass-kaartvariabele.)

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>

Centrale elementen

Daarnaast kunt u de elementen ook centreren met de transform utility class .translate-middle.

Deze klasse past de transformaties translateX(-50%)en translateY(-50%)toe op het element waarmee u, in combinatie met de hulpprogramma's voor randpositionering, een element absoluut kunt centreren.

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>

Door .translate-middle-xof .translate-middle-yklassen toe te voegen, kunnen elementen alleen in horizontale of verticale richting worden geplaatst.

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>

Voorbeelden

Hier zijn enkele voorbeelden uit het echte leven van deze lessen:

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>

U kunt deze klassen gebruiken met bestaande componenten om nieuwe te maken. Onthoud dat u de functionaliteit ervan kunt uitbreiden door items aan de $position-valuesvariabele toe te voegen.

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

Standaardwaarden voor hulpprogramma's worden gedeclareerd in een Sass-kaart en vervolgens gebruikt om onze hulpprogramma's te genereren.

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

Hulpprogramma's-API

Positiehulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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