z-index và stacking context hoạt động như thế nào?

Question

Accepted Answer

`z-index` điều khiển thứ tự xếp chồng **trước-sau** của các phần tử chồng lấn — giá trị cao hơn nằm trên. Nhưng nó chỉ hoạt động trên các phần tử **được định vị (positioned)**, và nó vận hành *trong* một **stacking context**, là nguồn gốc của hầu hết sự nhầm lẫn về z-index.

```css
.modal   { position: fixed; z-index: 100; }   /* trên cùng */
.overlay { position: fixed; z-index: 99; }    /* ngay dưới */
.content { position: relative; z-index: 1; }
```

`z-index` bị **bỏ qua** trên `position: static` (mặc định) — phần tử phải là `relative`, `absolute`, `fixed`, hoặc `sticky` để nó có tác dụng.

## Stacking context — cái bẫy

Một stacking context là một "lớp" độc lập. Các giá trị `z-index` chỉ cạnh tranh **trong cùng một context** — một phần tử con *không bao giờ* có thể thoát khỏi mức stacking của cha nó, bất kể z-index cao đến đâu.

```css
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }

.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a VẪN render dưới mọi thứ trong parent-b, */
/*    vì parent-a (z-index 1) hoàn toàn nằm dưới parent-b (z-index 2). */
```

Đây là bug kinh điển "modal z-index: 9999 của tôi vẫn nằm sau thứ gì đó" — modal bị mắc kẹt bên trong một phần tử cha nằm ở lớp thấp hơn.

## Những gì tạo ra một stacking context mới

Nhiều thuộc tính âm thầm tạo ra một context, có thể giam giữ các phần tử con:

```text
- position + z-index (khác auto)
- opacity nhỏ hơn 1
- transform, filter, will-change
- isolation: isolate
- một flex/grid item có z-index
```

## Cách khắc phục

```css
/* render modal ở document root (ngoài các phần tử cha giam giữ) — "portal" */
.isolated { isolation: isolate; } /* cố ý tạo một context nơi bạn muốn có */
```

Trong thực tế, render modal/tooltip ở đầu DOM (React portal) để chúng không bị mắc kẹt trong một phần tử cha ở lớp thấp.

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

Stacking context giải thích những bug z-index khó hiểu nhất: một z-index khổng lồ vẫn thua vì tổ tiên của nó nằm ở lớp thấp hơn.

Biết rằng `opacity`, `transform`, và positioned-z-index tạo ra context — và rằng phần tử con không thể thoát khỏi chúng — cho phép bạn debug thứ tự overlay/dropdown và cấu trúc DOM (portal) một cách đúng đắn.