Thuộc tính position trong CSS sửa đổi vị trí của phần tử trên trang HTML. Các thuộc tính top, right, bottom, left xác định vị trí phần tử tương đối với cạnh của hộp chứa. position có 5 giá trị: static, fixed, relative, sticky, và absolute.
Đặt phần tử đúng vị trí theo thiết kế là phần quan trọng của thiết kế web tốt. Đó là lý do thuộc tính position tồn tại. Nó có 5 giá trị để xác định cách phần tử được định vị.
Hướng dẫn này sẽ thảo luận, kèm ví dụ, cách dùng position để định vị phần tử. Sau khi đọc, bạn sẽ thành thạo việc định vị phần tử với CSS.
CSS Position
Thuộc tính position cho phép định nghĩa vị trí phần tử. Cú pháp:
position: positionType;
Nhiều tình huống cần position, ví dụ: thiết kế thanh điều hướng cố định (fixed) ở dưới cùng trang.
5 giá trị để thiết lập vị trí:
- static
- fixed
- relative
- sticky
- absolute
Kết hợp với top, bottom, left, right để định vị chính xác hơn. Chúng ta sẽ xem ví dụ chi tiết.
Các Giá Trị CSS Position
Static Position (Mặc Định)
Phần tử HTML mặc định là static. Nghĩa là không bị ảnh hưởng bởi top, bottom, left, right. Trình duyệt tự động render theo mặc định trừ khi code chỉ định khác.
Ví dụ: hộp chứa văn bản, vị trí mặc định:
<html> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: static; border: 2px solid lightblue; }
Nhấn Run để xem kết quả.
Hộp được định vị tĩnh (theo mặc định trình duyệt). Có viền 2px solid lightblue để dễ nhìn.
Fixed Position (Cố Định)
Giá trị fixed định vị phần tử tại một vị trí cụ thể trên trang. Phần tử luôn ở nguyên chỗ ngay cả khi cuộn trang. Vì phần tử bị loại khỏi luồng văn bản bình thường. Cần dùng top, right, bottom, left để đặt vị trí.
Ví dụ: hộp cố định góc dưới bên phải:
<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { width: 200px; border: 2px solid lightblue; position: fixed; bottom: 0; right: 0; }
Nhấn Run để xem kết quả.
Hộp rộng 200px, viền xanh nhạt. bottom: 0; right: 0 đặt góc dưới phải. Khi cuộn trang, hộp vẫn ở góc màn hình.
Relative Position (Tương Đối)
Giá trị relative định vị phần tử tương đối với vị trí mặc định của nó.
Dùng kèm top, bottom, left, right để chỉ định độ lệch (offset) so với vị trí mặc định. Khoảng trống do lệch tạo ra sẽ không bị phần tử khác lấp đầy.
Ví dụ: lệch hộp 50px sang trái:
<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: relative; left: 50px; border: 2px solid lightblue; }
Nhấn Run để xem kết quả.
Hộp bị đẩy 50px sang phải (do left: 50px). Khoảng trống 50px bên trái không bị lấp đầy.
Sticky Position (Dính/Ghim)
Giá trị sticky định vị phần tử tương đối cho đến khi người dùng cuộn qua ngưỡng nhất định. Sau đó, phần tử có vị trí fixed.
sticky là sự kết hợp của relative và fixed. Ban đầu relative, sau khi cuộn qua điểm mốc thì dính cố định.
Hữu ích để giữ luồng văn bản (document flow) nhưng vẫn muốn phần tử "dính" ở một vị trí khi cuộn (thường dùng cho navbar dính trên đầu).
Ví dụ: hộp xuất hiện sau đoạn văn, rồi dính lên đầu khi cuộn tới:
<html> <p>Lorem ipsum dolor sit amet...</p> <div> <p class="inner">This is a positioned box.</p> </div> <p>Pulvinar pellentesque habitant morbi...</p> <style> .inner { position: sticky; top: 0; border: 2px solid lightblue; }
Nhấn Run để xem kết quả.
Ảnh minh họa khi cuộn qua hộp:
Đầu trang là đoạn Lorem ipsum. Hộp xanh nằm dưới đoạn đó. Khi cuộn xuống chạm hộp, hộp dính vào top: 0 của viewport. Cuộn tiếp, hộp vẫn ở đầu. Cuộn lên trên hộp, hộp trở về vị trí ban đầu giữa hai đoạn văn.
Absolute Position (Tuyệt Đối)
Giá trị absolute định vị phần tử tương đối với một phần tử cha đã được định vị (positioned ancestor).
Phần tử absolute được định vị tương đối với phần tử cha gần nhất có position khác static (ví dụ: relative, fixed, absolute, sticky). Nếu không có cha như vậy, nó định vị tương đối <body> (initial containing block).
Ví dụ: hộp con (pink) góc dưới trái của hộp cha (xanh):
<html> <div class="outer"> <p>This is the outer box.</p> <p class="inner">This is a positioned box.</p> </div> <style> .outer { position: relative; border: 2px solid lightblue; width: 300px; height: 300px; } .inner { position: absolute; left: 0; bottom: 0; border: 2px solid pink; }
Nhấn Run để xem kết quả.
HTML: <div class="outer"> (cha), bên trong có <p class="inner"> (con).
CSS: Cha position: relative, viền xanh, 300x300px. Con position: absolute, left: 0; bottom: 0 → góc dưới trái của cha, viền hồng.
Nếu dùng fixed cho con, nó sẽ ra góc dưới trang web chứ không phải góc hộp cha.
Kết Luận
Thuộc tính CSS position định nghĩa vị trí phần tử trên trang web. Các thuộc tính top, right, bottom, left đặt phần tử tại vị trí cụ thể. Bây giờ bạn đã sẵn sàng định vị phần tử trong CSS như chuyên gia!