Trong CSS, thuộc tính position được sử dụng để xác định cách một phần tử được định vị trong trang web. Nó cho phép bạn điều chỉnh vị trí của phần tử so với các phần tử khác hoặc theo khung nhìn (viewport).
- Các giá trị của thuộc tính position
1.1. static (mặc định)
- Đây là giá trị mặc định.
- Phần tử sẽ được đặt theo luồng tài liệu thông thường.
- Không thể sử dụng các thuộc tính top, right, bottom, left.
1.2. relative
- Phần tử được đặt theo vị trí ban đầu trong luồng tài liệu.
- Có thể sử dụng top, right, bottom, left để điều chỉnh vị trí tương đối với chính nó.
1.3. absolute
- Phần tử sẽ được định vị tương đối với phần tử cha gần nhất có position khác static.
- Nếu không có phần tử cha nào có position khác static, thì nó sẽ định vị theo body.
1..4. fixed
- Phần tử được định vị tương đối với cửa sổ trình duyệt (viewport).
- Vị trí của phần tử không thay đổi khi cuộn trang.
1.5. sticky
- Là sự kết hợp giữa relative và fixed.
- Phần tử sẽ được cuộn theo trang cho đến khi đạt tới một vị trí cố định, sau đó sẽ “dính” tại vị trí đó.
Lưu ý: sticky hoạt động khi phần tử nằm trong một container có chiều cao đủ lớn.
2. So sánh các loại Position
| Giá trị | Di chuyển bằng top/left | Ra khỏi luồng tài liệu | Bám vào cửa sổ trình duyệt |
|---|---|---|---|
| static | ❌ | ❌ | ❌ |
| relative | ✅ | ❌ | ❌ |
| absolute | ✅ | ✅ | ❌ |
| fixed | ✅ | ✅ | ✅ |
| sticky | ✅ | ❌ | ✅ (khi cuộn) |
Giảng viên Cao Đăng Khoa
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
