ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯊꯥꯛ

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯊꯨꯅꯥ ꯀꯅꯐꯤꯒꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁꯣꯔꯇꯍꯦꯟꯗ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯄꯣꯖꯤꯁꯟ ꯚꯦꯜꯌꯨꯁꯤꯡ꯫

ꯀꯨꯏꯛ ꯄꯣꯖꯤꯁꯅꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯐꯪꯏ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯗ꯭ꯔꯕꯁꯨ꯫

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

ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯦꯝ-ꯁꯥꯕꯥ꯫

ꯑꯦꯖ ꯄꯣꯖꯤꯁꯅꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯐꯖꯅꯥ ꯁꯦꯝ-ꯁꯥꯕꯥ꯫ ꯐꯣꯔꯃꯦꯠ ꯑꯁꯤ {property}-{position}.

ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ ꯍꯥꯌꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ:

  • top- ꯚꯔꯇꯤꯀꯦꯜ topꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ꯫
  • start- ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ leftꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ (ꯑꯦꯜ.ꯇꯤ.ꯑꯥꯔ.ꯗꯥ)
  • bottom- ꯚꯔꯇꯤꯀꯦꯜ bottomꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ꯫
  • end- ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ rightꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ (ꯑꯦꯜ.ꯇꯤ.ꯑꯥꯔ.ꯗꯥ)

ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤ ꯀꯗꯥꯏꯗꯥ ꯂꯩꯔꯤꯕꯒꯦ :

  • 0- 0ꯑꯦꯖ ꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ꯫
  • 50- 50%ꯑꯦꯖ ꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ꯫
  • 100- 100%ꯑꯦꯖ ꯄꯣꯖꯤꯁꯅꯒꯤꯗꯃꯛ꯫

$position-values( ꯁꯥꯁ ꯃꯦꯞ ꯚꯦꯔꯤꯑꯦꯕꯂꯗꯥ ꯑꯦꯟꯠꯔꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯦꯟꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫)

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

ꯁꯦꯟꯇꯔꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯁꯨ ꯌꯥꯏ .translate-middle.

ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯦꯁꯅꯁꯤꯡ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ translateX(-50%)ꯑꯃꯁꯨꯡ translateY(-50%)ꯑꯦꯖ ꯄꯣꯖꯤꯁꯅꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯅꯍꯥꯀꯄꯨ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯕꯨ ꯑꯦꯕꯁꯣꯜꯌꯨꯇꯦꯗ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯌꯥꯍꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

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

ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ .translate-middle-xꯅꯠꯠꯔꯒꯥ .translate-middle-yꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯇꯧꯗꯨꯅꯥ, ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯅꯠꯠꯔꯒꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯗꯤꯔꯦꯛꯁꯟ ꯈꯛꯇꯗꯥ ꯊꯝꯕꯥ ꯌꯥꯏ꯫

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯇꯁꯦꯡꯕꯥ ꯄꯨꯟꯁꯤꯒꯤ ꯈꯨꯗꯝ ꯈꯔꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

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

ꯑꯅꯧꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ $position-valuesꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨꯗꯥ ꯑꯦꯟꯠꯔꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤ ꯁꯥꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯥ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯃꯦꯄꯁꯤꯡ꯫

ꯗꯤꯐꯣꯜꯇ ꯄꯣꯖꯤꯁꯟ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯂꯥꯎꯊꯣꯛꯂꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫

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

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯄꯣꯖꯤꯁꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ scss/_utilities.scss. ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ 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%),
      )
    ),