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

Giá trị chung

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>

Đầu cố định

Định vị một phần tử ở đầu khung nhìn, từ cạnh này sang cạnh khác. Hãy chắc chắn rằng bạn hiểu các phân nhánh của vị trí cố định trong dự án của bạn; bạn có thể cần thêm CSS bổ sung.

<div class="fixed-top">...</div>

Cố định đáy

Định vị một phần tử ở dưới cùng của khung nhìn, từ cạnh này sang cạnh khác. Hãy chắc chắn rằng bạn hiểu các phân nhánh của vị trí cố định trong dự án của bạn; bạn có thể cần thêm CSS bổ sung.

<div class="fixed-bottom">...</div>

Dính trên cùng

Định vị một phần tử ở đầu khung nhìn, từ cạnh này sang cạnh khác, nhưng chỉ sau khi bạn cuộn qua nó. Tiện .sticky-topích sử dụng CSS position: sticky, không được hỗ trợ đầy đủ trong tất cả các trình duyệt.

IE11 và IE10 sẽ hiển thị position: stickynhư position: relative. Do đó, chúng tôi bao bọc các kiểu trong một @supportstruy vấn, hạn chế sự dính vào chỉ những trình duyệt có thể hiển thị nó đúng cách.

<div class="sticky-top">...</div>