CSSBốn nguyên nhân theo thứ tự hay gặp:
1. Thiếu offset: sticky không làm gì nếu không có ít nhất một trong top / right / bottom / left. Đây là lỗi phổ biến nhất.
2. Tổ tiên có overflow khác visible: bất kỳ cha nào đặt overflow: hidden / auto / scroll sẽ trở thành scroll container mới; phần tử dính theo cha đó, mà cha đó lại không cuộn nên trông như không dính. Kiểm tra bằng cách duyệt ngược lên cây DOM.
3. Cha không đủ chiều cao: sticky chỉ trượt trong phạm vi phần tử cha trực tiếp. Nếu cha cao bằng đúng chính nó (ví dụ sidebar trong grid row align-items: start co lại vừa nội dung), không còn quãng đường nào để dính.
4. Cha là flex/grid item bị stretch sai: trong grid, mặc định item stretch nên thường ổn; nhưng nếu đã đặt align-self: start thì cha co lại và mất phạm vi sticky.
.sidebar { position: sticky; top: calc(var(--app-bar-height) + 20px); }
/* và kiểm tra: không tổ tiên nào có overflow: hidden */Cách debug nhanh: trong DevTools, xoá tạm overflow của từng tổ tiên; Chrome còn gắn nhãn cảnh báo cạnh khai báo position: sticky khi nó không có hiệu lực.