Trong thiết kế bố cục web, việc kiểm soát chính xác vị trí của các phần tử là yếu tố then chốt để xây dựng giao diện linh hoạt và chuyên nghiệp. Các phương pháp truyền thống như luồng chuẩn (normal flow) hay float không đủ khả năng xử lý nhiều tình huống phức tạp — ví dụ như cố định một thanh điều hướng khi cuộn trang, hoặc đặt một nút hành động nổi trên nền nội dung mà không làm xáo trộn cấu trúc bố cục.

Cơ chế định vị: Hai thành phần cốt lõi

Mỗi phần tử được định vị thông qua sự kết hợp giữa chế độ định vị (position) và biên lệch (top, right, bottom, left). Chế độ xác định cách phần tử tương tác với tài liệu; biên lệch xác định tọa độ cụ thể trong hệ quy chiếu đó.

static — Định vị mặc định, không can thiệp

.element { position: static; }

• Không thay đổi vị trí so với luồng chuẩn.
• Bỏ qua mọi giá trị top, right, bottom, left.
• Hiếm khi dùng chủ động — thường chỉ xuất hiện khi reset thuộc tính.

relative — Dịch chuyển dựa trên vị trí gốc

.card { position: relative; top: 12px; left: -8px; }

• Dịch chuyển từ vị trí ban đầu trong luồng chuẩn.
• Vẫn chiếm chỗ trong bố cục — các phần tử khác vẫn "nhìn thấy" nó như chưa di chuyển.
• Thường dùng để tạo bối cảnh định vị cho phần tử con (đặc biệt khi kết hợp với absolute).

absolute — Định vị tuyệt đối trong bối cảnh gần nhất có định vị

.tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }

• Thoát khỏi luồng chuẩn — không chiếm chỗ, không ảnh hưởng đến phần tử khác.
• Tìm bối cảnh định vị gần nhất (tức phần tử cha có position khác static). Nếu không tìm thấy, sẽ lấy cửa sổ trình duyệt làm gốc.
• Thường kết hợp với relative ở phần tử cha để giới hạn phạm vi hiển thị — nguyên tắc "con tuyệt đối – cha tương đối".

fixed — Cố định theo khung nhìn người dùng

.navbar { position: fixed; top: 0; right: 0; width: 240px; }

• Luôn gắn vào viewport, không phụ thuộc vào cuộn trang.
• Không liên quan đến bất kỳ phần tử cha nào — luôn tính từ góc trên cùng bên trái của màn hình.
• Cũng thoát khỏi luồng chuẩn và không chiếm vị trí ban đầu.

sticky — Kết hợp giữa relative và fixed

.header { position: sticky; top: 0; z-index: 100; }

• Hành xử như relative cho đến khi đạt ngưỡng cuộn (ví dụ: top: 0 chạm mép trên viewport), sau đó chuyển sang fixed.
• Giữ nguyên vị trí trong luồng chuẩn — không gây xô lệch bố cục khi chưa kích hoạt.
• Cần khai báo ít nhất một thuộc tính biên lệch (top, bottom, v.v.) mới hoạt động.
• Hỗ trợ tốt trên Chrome, Firefox, Safari; không hỗ trợ IE.

Bảng tổng hợp đặc điểm định vị

Điều khiển thứ tự xếp chồng: z-index

Khi các phần tử định vị chồng lên nhau, thuộc tính z-index quyết định thứ tự theo trục Z (độ sâu):

.modal-backdrop { z-index: 999; }
.modal-content { z-index: 1000; }

• Chỉ áp dụng cho phần tử có position khác static.
• Giá trị số nguyên (âm/dương/0); giá trị cao hơn nằm trên cùng.
• Cùng giá trị → phần tử khai báo sau đè lên trước.
• Không dùng đơn vị (không viết z-index: 10px).

Một số lưu ý nâng cao

• Căn giữa phần tử tuyệt đối: Dùng top: 50%; left: 50%; transform: translate(-50%, -50%) thay vì margin âm — đảm bảo chính xác với mọi kích thước.
• Chiều cao/chiều rộng phần tử định vị: Phần tử inline khi có absolute hoặc fixed có thể đặt width/height trực tiếp; phần tử block nếu không khai báo sẽ co về kích thước nội dung.
• Margin collapse không xảy ra: Các phần tử thoát luồng (absolute, fixed, float) không gây sụp đổ margin với nhau hoặc với phần tử cha.
• Hiệu ứng che phủ: Khác với float (chỉ đẩy nội dung văn bản xung quanh), absolute và fixed che phủ toàn bộ nội dung phía dưới — cả văn bản lẫn hình ảnh.