Thuộc tính position quy định các loại phương pháp định vị được sử dụng cho một phần tử
Có năm giá trị vị trí khác nhau:
- static
- relative
- fixed
- absolute
- sticky
Các thuộc tính trên chỉ hoạt động khi thuộc tính position được cài đặt từ trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí
1. Thuộc tính position: static;
Một phần tử với position: static; không được định vị theo bất kỳ cách đặc biệt nào; nó luôn được định vị theo dòng bình thường của trang
Các phần tử HTML được xem nó là giá trị mặc định
Các phần tử đã được ở vị trí tĩnh sẽ không bị ảnh hưởng bởi các thuộc tính top(phía trên), bottom(phía dưới), left(bên trái), right(bên phải)
Ví dụ:
2. Thuộc tính position: relative;
Thuộc tính position: relative; trong CSS giúp định vị trí bình thường cho các thành phần
Nếu bạn sử dụng thuộc tính này thì sẽ phải sử dụng kèm theo với các thuộc tính căn chỉnh tọa độ của thành phần (lưu ý: các giá trị của các thẻ này là chính là đơn vị đo như px). top(phía trên), bottom(phía dưới), left(bên trái), right(bên phải)
Ví dụ:
3. Thuộc tính position: fixed;
Một phần tử với position: fixed; được định vị so với chế độ xem, có nghĩa là nó luôn ở cùng một vị trí ngay cả khi trang được cuộn. Bạn có thể sử dụng các thuộc tính top(phía trên), bottom(phía dưới), left(bên trái), right(bên phải) để định vị các phần tử
Một phần tử cố định không để lại khoảng trống trên trang mà nó thường được đặt
Ví dụ:
4. Thuộc tính position: absolute;
Một phần tử với position: absolute; được định vị tương đối với phần tử mẹ của nó được định vị gần nhất (thay vì được định vị so với chế độ xem, như cố định)
Tuy vậy, nếu một phần tử được định vị theo phương pháp này không có phần tử mẹ được định vị thì nó sẽ sử dụng phần thân tài liệu và di chuyển cùng với việc cuộn trang
Lưu ý: Các phần tử có position: absolute; bị xóa khỏi luồng thông thường và có thể chồng chéo các phần tử
Ví dụ:
5. Thuộc tính position: sticky;
Một phần tử với position: sticky; được định vị dựa trên vị trí cuộn của người dùng
Một phần tử cố định chuyển đổi giữa relative và fixed, tùy thuộc vào vị trí cuộn
Nó được định vị tương đối cho đến khi gặp vị trí bù nhất định trong khung nhìn – sau đó nó “dính” vào vị trí (position: fixed; )
Bạn cũng phải xác định ít nhất một trong các thuộc tính top, right, bottom hoặc left để định vị dính để làm việc
Ví dụ:
