Bạn sẽ đặt một nhãn lên card bằng absolute và tạo một tiêu đề nhỏ sticky trong vùng cuộn. Qua đó hiểu containing block và lý do tăng z-index lên rất lớn vẫn có thể không giải quyết được lỗi.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Không rời normal flow khi chưa cần

Static là vị trí thông thường. Relative giữ chỗ trong flow và có thể dịch hiển thị, đồng thời thường được dùng làm mốc cho con absolute. Absolute rời flow và được đặt theo containing block phù hợp; trong nhiều trường hợp đơn giản là tổ tiên positioned gần nhất.

Các thuộc tính như transform có thể tạo containing block trong những tình huống khác. Vì vậy “absolute luôn theo cửa sổ” là cách hiểu sai. Đừng dùng absolute để xếp toàn bộ nội dung bài viết dài vì các hộp khác không tự dành chỗ cho nó.

Dùng absolute cho một nhãn ngắn

Card mẫu có position:relative, nhãn dùng position:absolute với top và right. Nhãn nổi trên khung card mà không quyết định chiều cao nội dung. Phần chứa cần có khoảng trống để nhãn không che heading hoặc nút.

Nếu nội dung nhãn dài, nó có thể cần giới hạn kích thước và ngắt dòng. Một nhãn đẹp với hai chữ không chứng minh mọi nội dung động đều phù hợp.

Sticky cần mốc và không gian cuộn

Sticky kết hợp hành vi theo flow và ghim trong một phạm vi cuộn. Cần một inset như top:0 ở trục muốn ghim. Nó chịu giới hạn bởi vùng chứa và tổ tiên có cơ chế cuộn; nếu vùng quá ngắn hoặc ancestor overflow khác dự kiến, kết quả có thể gây nhầm lẫn.

Ví dụ dùng một vùng cuộn có chiều cao rõ để quan sát heading bám ở đầu khi nội dung chạy dưới nó. Không cần đổi header toàn website thành sticky ngay từ bài này.

Z-index không phải cuộc thi số lớn

Stacking context tạo các nhóm chồng lớp riêng. Z-index của một phần tử con không tự giúp nó vượt ra khỏi nhóm cha để thắng mọi phần tử bên ngoài. Opacity, transform và một số cơ chế layout có thể tạo stacking context.

Khi một popup bị che, kiểm tra tổ tiên và nhóm lớp trước khi tăng từ 999 lên 999999. Fixed cũng không luôn độc lập với mọi tổ tiên có transform. Hãy đọc computed styles của đúng phần tử liên quan.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<article class="position-card"><span class="badge">Cơ bản</span><h3>Nhãn nằm trên card</h3><p>Card vẫn có nội dung trong flow.</p></article><div class="sticky-demo"><h3>Tiêu đề sticky trong vùng cuộn</h3><p>Cuộn vùng này để quan sát.</p><p>Một đoạn thứ hai để tăng nội dung.</p><p>Đoạn tiếp theo vẫn nằm trong flow.</p><p>Đoạn cuối giúp vùng có đủ chiều cao để cuộn.</p></div>

Thêm hoặc sửa trong styles.css

.position-card { position: relative; border: 1px solid #acc4d7; padding: 3rem 1rem 1rem; max-width: 30rem; }
.badge { position: absolute; top: .6rem; right: .6rem; background: #173957; color: #fff; padding: .15rem .6rem; border-radius: 1rem; }
.sticky-demo { height: 10rem; overflow: auto; border: 1px solid #acc4d7; margin-block: 1rem; }
.sticky-demo h3 { position: sticky; top: 0; margin: 0; padding: .4rem; background: #e9f4ff; z-index: 1; }
.sticky-demo p { padding-inline: .7rem; }

So sánh trước và sau

Nhãn được đặt theo card. Trong vùng riêng, heading sticky chỉ bám trong phạm vi vùng cuộn; đó không phải một header fixed của toàn trang.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Absolute theo sai mốc: kiểm tra containing block.
• Sticky không có top hoặc không có vùng cuộn phù hợp: kiểm tra điều kiện.
• Tăng z-index nhưng không hiểu stacking context: xem tổ tiên.

Tự kiểm tra

• Tạm bỏ relative ở card rồi quan sát nhãn tìm mốc khác.
• Thử cuộn vùng mẫu và sau đó cuộn cả trang để phân biệt.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML