Sự khác biệt giữa thuộc tính Position: absolute và Position: fixed là gì trong CSS, và trong trường hợp nào lập trình viên nên chọn cái nào để xây dựng thành phần Navbar hoặc Modal?

Question

Accepted Answer

Việc nắm vững các giá trị của thuộc tính position là nền tảng cốt lõi để xây dựng bố cục giao diện web chính xác.
1. Phân tích định nghĩa và ngữ cảnh

Position: absolute: Phần tử được định vị tương thế dựa trên phần tử cha gần nhất có thiết lập position khác static (như relative, absolute, fixed). Nếu không có, nó sẽ căn cứ vào khung nhìn của thẻ gốc (<html>). Phần tử này sẽ bị loại bỏ khỏi luồng tài liệu thông thường (Normal Flow).
Position: fixed: Phần tử được định vị tương đối trực tiếp với khung nhìn trình duyệt (Viewport). Nó hoàn toàn giữ nguyên vị trí ngay cả khi người dùng cuộn trang (Scroll) và cũng bị loại bỏ khỏi luồng tài liệu thông thường.

2. Ứng dụng thực chiến trong Enterprise

Thành phần Navbar (Thanh điều hướng cố định khi cuộn trang):
Phải sử dụng position: fixed kết hợp với top: 0, left: 0 và width: 100% để thanh điều hướng luôn nằm ở đỉnh màn hình dù người dùng cuộn đến bất kỳ vị trí nào.

Thành phần Modal (Hộp thoại nổi):
Thường sử dụng position: fixed cho lớp phủ nền (Overlay) và khung Modal để đảm bảo hộp thoại luôn nằm chính giữa màn hình, không bị trôi đi khi trang có nội dung dài.

3. Ví dụ minh họa
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  position: relative; /* Định vị tuyệt đối bên trong modal nếu cần */
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
}
4. Lưu ý thực chiến

Khi dùng position: absolute, hãy luôn kiểm tra xem phần tử cha đã được thiết lập position: relative hay chưa để tránh việc phần tử con bị nhảy vị trí ra ngoài khung thiết kế mong muốn.

Sự khác biệt giữa thuộc tính Position: absolute và Position: fixed là gì trong CSS, và trong trường hợp nào lập trình viên nên chọn cái nào để xây dựng thành phần Navbar hoặc Modal?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi css liên quan cùng chủ đề