Vés al contingut principal Saltar a la navegació de documents
Check
in English

Posició

Utilitzeu aquestes utilitats abreujades per configurar ràpidament la posició d'un element.

En aquesta pàgina

Valors de posició

Hi ha classes de posicionament ràpid disponibles, tot i que no responen.

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

Ordena els elements

Organitzeu els elements fàcilment amb les utilitats de posicionament de vora. El format és {property}-{position}.

Quan la propietat és una de:

  • toptop- per a la posició vertical
  • start- per a la posició horitzontal left(en LTR)
  • bottombottom- per a la posició vertical
  • end- per a la posició horitzontal right(en LTR)

On la posició és una de:

  • 0- per a 0la posició de vora
  • 50- per a 50%la posició de vora
  • 100- per a 100%la posició de vora

(Podeu afegir més valors de posició afegint entrades a la $position-valuesvariable del mapa 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>

Elements centrals

A més, també podeu centrar els elements amb la classe d'utilitat de transformació .translate-middle.

Aquesta classe aplica les transformacions translateX(-50%)i translateY(-50%)a l'element que, en combinació amb les utilitats de posicionament de vores, permet centrar absolutament un element.

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>

En afegir .translate-middle-xo .translate-middle-yclasses, els elements només es poden col·locar en direcció horitzontal o vertical.

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>

Exemples

Aquests són alguns exemples de la vida real d'aquestes classes:

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>

Podeu utilitzar aquestes classes amb components existents per crear-ne de nous. Recordeu que podeu ampliar la seva funcionalitat afegint entrades a la $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

Mapes

Els valors d'utilitat de posició per defecte es declaren en un mapa Sass i després s'utilitzen per generar les nostres utilitats.

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

Utilitats API

Les utilitats de posició es declaren a la nostra API d'utilitats en scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

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