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ụ: