Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Posisie

Gebruik hierdie snelskrifhulpmiddels om die posisie van 'n element vinnig op te stel.

Posisiewaardes

Vinnige posisioneringsklasse is beskikbaar, alhoewel hulle nie reageer nie.

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

Rangskik elemente

Rangskik elemente maklik met die randposisioneringshulpmiddels. Die formaat is {property}-{position}.

Waar eiendom een ​​van:

  • top- vir die vertikale topposisie
  • start- vir die horisontale leftposisie (in LTR)
  • bottom- vir die vertikale bottomposisie
  • end- vir die horisontale rightposisie (in LTR)

Waar posisie een van is:

  • 0- vir 0randposisie
  • 50- vir 50%randposisie
  • 100- vir 100%randposisie

(Jy kan meer posisiewaardes byvoeg deur inskrywings by die $position-valuesSass-kaartveranderlike by te voeg.)

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>

Sentrum elemente

Daarbenewens kan jy ook die elemente sentreer met die transformasienutsklas .translate-middle.

Hierdie klas pas die transformasies translateX(-50%)en translateY(-50%)op die element toe wat, in kombinasie met die randposisioneringshulpmiddels, jou toelaat om 'n element te sentreer.

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>

Deur .translate-middle-xof .translate-middle-yklasse by te voeg, kan elemente slegs in horisontale of vertikale rigting geposisioneer word.

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>

Voorbeelde

Hier is 'n paar werklike voorbeelde van hierdie klasse:

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>

Jy kan hierdie klasse met bestaande komponente gebruik om nuwes te skep. Onthou dat jy die funksionaliteit daarvan kan uitbrei deur inskrywings by die $position-valuesveranderlike te voeg.

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

Kaarte

Verstekposisie-nutswaardes word in 'n Sass-kaart verklaar en dan gebruik om ons nutsprogramme te genereer.

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

Utilities API

Posisie nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

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