Admin
16-01-2025
3 tháng trước
Thuộc tính position trong CSS giúp xác định cách thức và vị trí của một phần tử trong trang web. Khi được kết hợp với các thuộc tính như top, right, bottom, và left, position cho phép bạn kiểm soát chính xác vị trí của phần tử trong mối quan hệ với các phần tử khác hoặc với viewport.
Dưới đây là các giá trị chính của thuộc tính position trong CSS:
position: static:
Mặc định: Đây là giá trị mặc định cho tất cả phần tử trong CSS.
Luồng bình thường: Phần tử được đặt trong luồng bố cục mặc định của trang, nghĩa là nó không bị ảnh hưởng bởi các thuộc tính như top, right, bottom, left, hay z-index. Nó chỉ xuất hiện ở vị trí mà nó được khai báo trong HTML.
position: relative:
Tuân theo luồng thông thường: Phần tử vẫn tham gia vào luồng bố cục của tài liệu như một phần tử bình thường.
Dịch chuyển: Bạn có thể sử dụng các thuộc tính top, right, bottom, và left để dịch chuyển phần tử so với vị trí ban đầu của nó mà không ảnh hưởng đến các phần tử khác. Điều này giúp dễ dàng thay đổi vị trí mà không làm thay đổi cấu trúc chung của trang.
position: absolute:
Định vị tương đối với phần tử cha: Phần tử được định vị dựa trên phần tử cha gần nhất có thuộc tính position khác static. Nếu không có phần tử cha như vậy, nó sẽ được định vị tương đối với thẻ <html>.
Loại khỏi luồng bình thường: Phần tử sẽ thoát khỏi luồng bố cục thông thường của trang, nghĩa là nó không chiếm không gian trong tài liệu và có thể được đặt chính xác tại vị trí mà bạn chỉ định.
position: fixed:
Cố định so với viewport: Phần tử này sẽ được cố định trên màn hình và không bị ảnh hưởng bởi việc cuộn trang. Điều này có nghĩa là phần tử luôn hiển thị ở vị trí xác định trên cửa sổ trình duyệt, bất kể trang có cuộn xuống hay không.
Loại khỏi luồng bình thường: Phần tử không tham gia vào luồng bố cục của trang và luôn giữ vị trí cố định dù người dùng cuộn trang.
position: sticky:
Kết hợp giữa relative và fixed: Phần tử bắt đầu theo luồng bình thường (giống relative) nhưng sẽ "dính" vào vị trí cố định khi người dùng cuộn trang đến một điểm nhất định (giống fixed).
Dựa trên thao tác cuộn: Phần tử sẽ duy trì vị trí tương đối cho đến khi người dùng cuộn trang đến vị trí đã xác định, sau đó nó sẽ cố định lại và không di chuyển nữa, giống như phần tử có position: fixed.
Mỗi giá trị position có ứng dụng khác nhau, và lựa chọn tùy thuộc vào yêu cầu thiết kế và chức năng của trang web bạn đang phát triển.
