position điều khiển cách một phần tử được đặt và liệu các thuộc tính offset (top/right/bottom/left) có áp dụng hay không.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute định vị một phần tử relative theo ancestor được định vị gần nhất (bất cứ thứ gì khác static). Vì vậy bạn đặt position: relative trên một phần tử cha để biến nó thành điểm tham chiếu:
.card {
position: relative; /* trở thành ngữ cảnh định vị (positioning context) */
}
.badge {
position: absolute; /* định vị relative theo .card */
top: 8px;
right: 8px; /* ghim badge vào góc trên-phải của card */
}
Mẫu cha-relative / con-absolute này có ở khắp nơi: badge, dropdown, tooltip, nút đóng.
.navbar { position: fixed; top: 0; } /* đứng yên trên màn hình khi cuộn */
.section-header { position: sticky; top: 0; } /* cuộn cùng nội dung, rồi dính ở trên */
top: 0), rồi đứng yên ở đó khi container của nó còn trong tầm nhìn — tuyệt vời cho section header.Các phần tử absolute/fixed bị loại khỏi flow bình thường, nên chúng không giữ chỗ — các phần tử anh em hành xử như thể chúng không tồn tại, có thể gây chồng lấn. Hãy tính trước điều này (ví dụ thêm padding để bù cho một navbar fixed).
position thiết yếu cho overlay, sticky header, modal, dropdown, và badge.
Mối quan hệ cha-relative/con-absolute và sự khác biệt fixed-vs-sticky là phần cốt lõi thực tế bạn dùng liên tục.