CSSposition quyết định element có nằm trong normal flow hay không, và top/right/bottom/left neo vào đâu.
css
.static { position: static; } /* mặc định — top/left KHÔNG có tác dụng */
.relative { position: relative; top: 10px; } /* dịch 10px, CHỖ CŨ vẫn được giữ */
.absolute { position: absolute; top: 0; right: 0; } /* thoát flow */
.fixed { position: fixed; bottom: 24px; right: 24px; } /* neo vào viewport */
.sticky { position: sticky; top: 0; } /* lai relative + fixed */| Giá trị | Còn chiếm chỗ | Neo theo |
|---|---|---|
static | có | — |
relative | có (chỗ cũ giữ nguyên) | chính nó |
absolute | không | tổ tiên gần nhất có position ≠ static |
fixed | không | viewport |
sticky | có | tổ tiên cuộn gần nhất |
Công dụng phổ biến nhất của relative không phải để dịch chuyển, mà là làm mốc neo cho absolute con:
css
.card { position: relative; }
.card .badge { position: absolute; top: 8px; right: 8px; }Lưu ý 1: absolute mà không tổ tiên nào có position → neo vào khối gốc, thường là văn bản trôi tận đầu trang.
Lưu ý 2: fixed mất tác dụng neo-viewport khi tổ tiên có transform, filter hoặc will-change — nó chuyển sang neo vào tổ tiên đó. Đây là nguyên nhân thường gặp của "modal fixed bỗng chạy theo trang".