Login

Thuộc tính position trong CSS: relative, absolute, fixed và sticky

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Thuộc tính position là một trong những nguồn gây bối rối nhất của CSS: đặt absolute mà phần tử bay mất khỏi chỗ cần, z-index lớn mấy cũng không nổi lên. Mọi thứ trở nên dễ hiểu khi bạn nắm được một nguyên tắc: phần tử định vị theo cái gì.

Năm giá trị của position

  • static (mặc định): phần tử nằm theo dòng chảy bình thường, top, left không có tác dụng.
  • relative: vẫn nằm trong dòng chảy, nhưng bạn có thể dịch chuyển nó so với vị trí gốc. Chỗ trống ban đầu vẫn được giữ.
  • absolute: bị lấy ra khỏi dòng chảy, định vị theo tổ tiên gần nhất có position khác static.
  • fixed: định vị theo khung nhìn trình duyệt, đứng yên khi cuộn trang.
  • sticky: lai giữa relative và fixed, nằm bình thường cho đến khi cuộn tới ngưỡng thì "dính" lại.

Relative: làm điểm neo

Bản thân position: relative hiếm khi dùng để dịch chuyển. Tác dụng quan trọng nhất của nó là biến phần tử thành điểm neo cho các con dùng absolute:

.card {
  position: relative;
}
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Huy hiệu sẽ nằm ở góc trên bên phải của .card. Nếu bạn quên đặt position: relative cho thẻ cha, huy hiệu sẽ định vị theo tổ tiên khác, hoặc theo cả trang, và bay đến một chỗ bất ngờ. Đây là lỗi phổ biến nhất.

Absolute: đặt chính xác nhưng cẩn thận

Vì bị lấy ra khỏi dòng chảy, phần tử absolute không còn chiếm chỗ, các phần tử khác sẽ xếp như thể nó không tồn tại. Cha của nó cũng không giãn theo chiều cao của nó. Absolute phù hợp cho huy hiệu, nút đóng, tooltip, menu thả xuống, lớp phủ. Đừng dùng nó để dựng bố cục chính của trang, hãy dùng Flexbox hoặc Grid.

Mẹo phủ kín phần tử cha:

.overlay {
  position: absolute;
  inset: 0;   /* viết tắt của top, right, bottom, left bằng 0 */
}

Fixed: gắn với khung nhìn

Phù hợp cho thanh điều hướng luôn hiện, nút "lên đầu trang" hay bong bóng chat ở góc màn hình:

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

Lưu ý trên điện thoại: thanh địa chỉ co giãn và bàn phím ảo có thể khiến phần tử fixed ở sát đáy trông lạ, và nội dung có thể bị che nếu bạn không chừa khoảng đệm. Hãy luôn thử trên thiết bị thật.

Sticky: tiêu đề dính khi cuộn

.table-header {
  position: sticky;
  top: 0;
  background: white;
}

Phần tử chỉ dính khi bạn đặt ít nhất một ngưỡng như top. Nó dính trong phạm vi của phần tử cha, nên nếu cha quá thấp thì hiệu ứng sẽ không thấy rõ. Sticky không hoạt động nếu một tổ tiên có overflow: hidden, auto hoặc scroll, đây là nguyên nhân thường gặp khi "sao sticky của tôi không chạy".

z-index và ngữ cảnh xếp chồng

z-index quyết định thứ tự chồng lớp, nhưng chỉ có tác dụng với phần tử đã có position khác static (hoặc là flex hay grid item). Hơn nữa, mỗi stacking context là một "thế giới riêng": một phần tử có z-index 9999 nằm trong một ngữ cảnh xếp chồng thấp vẫn không thể nổi lên trên phần tử ở ngữ cảnh cao hơn. Ngữ cảnh xếp chồng mới được tạo bởi nhiều thứ, như position kết hợp với z-index, opacity nhỏ hơn 1 hoặc transform.

Lời khuyên: dùng một thang z-index nhỏ và có tên, ví dụ biến CSS cho từng lớp như dropdown, modal, toast, thay vì đặt các số lớn ngẫu nhiên.

Ví dụ: thanh điều hướng dính kèm menu thả xuống

Hãy kết hợp các giá trị position vào một mẫu thường gặp:

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: white;
}
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 30;
}

Header dính ở đầu khi cuộn. Mỗi mục dropdown là điểm neo, còn menu con absolute xuất hiện ngay dưới mục đó nhờ top: 100%. Vì menu nằm trong stacking context của header (z-index 20), nó vẫn nổi trên nội dung trang bên dưới. Nếu menu bị cắt mất, hãy kiểm tra xem tổ tiên nào có overflow khác visible.

Kết luận

Hãy nhớ: relative làm điểm neo, absolute đặt theo điểm neo, fixed đặt theo màn hình, sticky dính khi cuộn, và z-index chỉ so sánh trong cùng ngữ cảnh. Khi gặp lỗi, mở DevTools và tìm tổ tiên nào đang là điểm neo.

Bạn có thể củng cố kiến thức này qua dự án thực hành trong các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment