z-index และ stacking contexts ทำงานอย่างไร

Question

Accepted Answer

`z-index` ควบคุม **ลำดับชั้นด้านหน้า-ด้านหลัง** ของการทับซ้อนขององค์ประกอบ — ค่าที่สูงกว่านั้นอยู่ด้านบน แต่มันใช้งานได้เพียง **องค์ประกอบที่วางตำแหน่ง** และมันทำงาน *ภายใน* **stacking context** ซึ่งเป็นแหล่งที่มาของความสับสนส่วนใหญ่เกี่ยวกับ z-index

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` **ถูกละเว้น** บน `position: static` (ค่าเริ่มต้น) — องค์ประกอบจะต้อง `relative` `absolute` `fixed` หรือ `sticky` เพื่อให้สามารถใช้ได้

## Stacking contexts — ข้อผิดพลาด

stacking context คือ "เลเยอร์" ที่เป็นอิสระ ค่า `z-index` ระดับเพียง **ภายในบริบทเดียวกัน** — ลูก *ไม่สามารถ* หลุดจากระดับ stacking ของผู้ปกครองได้ ไม่ว่า z-index จะสูงแค่ไหน

```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 STILL renders below everything in parent-b, */
/*    because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
```

นี่คือข้อผิดพลาดคลาสสิก "z-index: 9999 modal ของฉันยังคงอยู่เบื้องหลังบางสิ่ง" — modal ติดอยู่ภายในผู้ปกครองที่อยู่ในเลเยอร์ที่ต่ำกว่า

## สิ่งที่สร้าง stacking context ใหม่

คุณสมบัติหลายอย่างสร้างมันขึ้นมาเงียบ ๆ ซึ่งอาจจะแยกลูกหลาน:

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## การแก้ไข

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

ในทางปฏิบัติ ให้แสดง modals/tooltips ที่ด้านบนของ DOM (React portals) เพื่อไม่ให้ติดอยู่ในผู้ปกครองระดับต่ำ

## ทำไมสิ่งนี้จึงสำคัญ

Stacking contexts อธิบายข้อผิดพลาด z-index ที่สับสนมากที่สุด: z-index ที่สูงมากแต่ยังคงแพ้เพราะบรรพบุรุษของมันอยู่ในเลเยอร์ที่ต่ำกว่า

การรู้ว่า `opacity` `transform` และ z-index ที่วางตำแหน่งสร้าง contexts — และลูก ๆ ไม่สามารถหลุดออกไป — ช่วยให้คุณแก้ไขข้อบกพร่องในการสั่งซื้อ overlay/dropdown และสร้างโครงสร้าง DOM ของคุณ (portals) อย่างถูกต้อง