Position sticky hoạt động thế nào?

sticky là relative cho tới khi chạm ngưỡng, sau đó thành fixed trong phạm vi cha.

.toc {
  position: sticky;
  top: 16px;            /* BẮT BUỘC: không có ngưỡng thì không dính */
}

Ba điều kiện phải đủ, thiếu một là không chạy:

1. Có ít nhất một trong top/right/bottom/left.
2. Không tổ tiên nào có overflow: hidden | auto | scroll — nếu có, element dính trong khung cuộn đó chứ không phải theo trang.
3. Cha phải cao hơn element — sticky chỉ di chuyển trong phạm vi cha, hết cha là nó đi theo.

/* header bảng dính khi cuộn */
thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

Lưu ý 1: lỗi hay gặp là đặt overflow: hidden ở một cha xa để cắt góc bo — sticky chết im lặng, không báo lỗi. Đây là nguyên nhân số một của "sticky không chạy".

Lưu ý 2: quên đặt background — nội dung cuộn phía dưới hiện xuyên qua header dính.

Lưu ý 3: cha là flex container với align-items: stretch (mặc định) làm con cao bằng cha, nên không còn khoảng nào để dính; đặt align-self: start cho con.