Chức vụ

Sử dụng các tiện ích viết tắt này để nhanh chóng định cấu hình vị trí của một phần tử.

Trên trang này

Giá trị vị trí

Các lớp định vị nhanh có sẵn, mặc dù chúng không đáp ứng.

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

Sắp xếp các yếu tố

Sắp xếp các yếu tố dễ dàng với các tiện ích định vị cạnh. Định dạng là {property}-{position}.

Trường hợp tài sản là một trong:

top- cho topvị trí thẳng đứng
start- cho vị trí nằm ngang left(trong LTR)
bottom- cho bottomvị trí thẳng đứng
end- cho vị trí nằm ngang right(trong LTR)

Vị trí là một trong:

0- cho 0vị trí cạnh
50- cho 50%vị trí cạnh
100- cho 100%vị trí cạnh

(Bạn có thể thêm nhiều giá trị vị trí hơn bằng cách thêm các mục nhập vào $position-valuesbiến bản đồ 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>

Các yếu tố trung tâm

Ngoài ra, bạn cũng có thể căn giữa các phần tử với lớp tiện ích biến đổi .translate-middle.

Lớp này áp dụng các phép biến đổi translateX(-50%)và translateY(-50%)cho phần tử, kết hợp với các tiện ích định vị cạnh, cho phép bạn căn giữa tuyệt đối một phần tử.

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>

Bằng cách thêm .translate-middle-xhoặc .translate-middle-ycác lớp, các phần tử chỉ có thể được định vị theo hướng ngang hoặc dọc.

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>

Các ví dụ

Dưới đây là một số ví dụ thực tế về các lớp này:

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>

Bạn có thể sử dụng các lớp này với các thành phần hiện có để tạo các thành phần mới. Hãy nhớ rằng bạn có thể mở rộng chức năng của nó bằng cách thêm các mục nhập vào $position-valuesbiến.

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

Bản đồ

Các giá trị tiện ích vị trí mặc định được khai báo trong bản đồ Sass, sau đó được sử dụng để tạo các tiện ích của chúng tôi.

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

API tiện ích

Tiện ích vị trí được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

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