position: sticky thực sự hoạt động như thế nào, và tại sao đôi khi nó thất bại?

Question

Accepted Answer

`position: sticky` là một dạng lai: một phần tử hành xử như `relative` (giữ trong flow bình thường) **cho đến khi** nó cuộn đến một ngưỡng bạn chỉ định, rồi hành xử như `fixed` (dính tại chỗ) — nhưng chỉ khi **containing block** của nó còn trên màn hình.

```css
.section-header {
  position: sticky;
  top: 0;        /* dính khi cạnh trên của nó chạm đỉnh viewport */
}
```

Giá trị `top` (hoặc `bottom`/`left`/`right`) là **bắt buộc** — nó định nghĩa ngưỡng. Nếu thiếu, sticky không làm gì cả.

## Phạm vi: nó chỉ dính trong cha của nó

Một phần tử sticky bị giới hạn trong **container cha** của nó. Nó dính khi cuộn *qua* cha đó, rồi cuộn đi khi đáy của cha vượt qua. Đây là điều làm cho "sticky section header" hoạt động — mỗi header chỉ dính khi section của chính nó còn trong tầm nhìn.

## Tại sao nó thường "không hoạt động" — các trường hợp thất bại

**1. Một tổ tiên có `overflow: hidden/auto/scroll`.** Đây là nguyên nhân số 1. Sticky bị phá vỡ bởi bất kỳ tổ tiên có thể cuộn nào, vì phần tử dính relative theo *scroll container đó*, không phải trang:

```css
.wrapper { overflow: hidden; } /* ❌ âm thầm giết sticky trên các phần tử con */
```

**2. Cha không đủ cao.** Sticky chỉ có chỗ để dính nếu cha cao hơn phần tử sticky — nếu cha cao bằng, không có gì để cuộn qua, nên nó không bao giờ có vẻ dính.

**3. Không đặt ngưỡng.** Quên `top`/`bottom` nghĩa là không có điểm dính.

**4. Ràng buộc chiều cao trên cha** (ví dụ một flex parent kéo dãn các item) cũng có thể loại bỏ chỗ để cuộn.

## Checklist debug

```text
✓ Tôi đã đặt top/bottom/left/right chưa?
✓ Có tổ tiên NÀO có overflow khác visible không?
✓ Container cha có cao hơn phần tử sticky không?
```

## Tại sao điều này quan trọng

`position: sticky` cung cấp sức mạnh cho sticky header, header bảng, sidebar, và các UI "scrollspy" mà không cần JavaScript.

Nhưng các điểm kỳ quặc của nó — đặc biệt là `overflow` trên *bất kỳ* tổ tiên nào âm thầm phá vỡ nó — khiến nó thường là nguồn gốc của việc debug "sao cái này không dính?".

Biết phạm vi containing-block và cái bẫy overflow là điều cho phép bạn dùng nó một cách đáng tin cậy.