كيف يعمل z-index وسياقات التكديس؟

Question

Accepted Answer

`z-index` يتحكم في ترتيب التكديس من **الأمام إلى الخلف** للعناصر المتداخلة — القيم الأعلى تجلس في الأعلى. لكنه يعمل فقط على العناصر **الموضعية**، ويعمل *ضمن* **سياق التكديس**، وهو مصدر معظم الارتباك المتعلق بـ 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` لكي ينطبق عليه.

## سياقات التكديس — المشكلة

سياق التكديس هو "طبقة" مستقلة بذاتها. قيم `z-index` تنافس فقط **ضمن نفس السياق** — لا يمكن أبداً لطفل أن يهرب من مستوى تكديس والده، بغض النظر عن مدى ارتفاع 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). */
```

هذا هو الخطأ الكلاسيكي "modal الخاص بي بـ z-index: 9999 لا يزال خلف شيء ما" — modal محاصر داخل والد موجود على طبقة أقل.

## ما الذي ينشئ سياق تكديس جديد

العديد من الخصائص تنشئ واحداً بصمت، مما قد يحاصر الأحفاد:

```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) حتى لا تكون محاصرة في والد ذو طبقة منخفضة.

## لماذا يهم

سياقات التكديس تشرح أكثر أخطاء z-index محيّرة: z-index ضخم لا يزال يخسر لأن سلفه على طبقة أقل.

معرفة أن `opacity` و `transform` و positioned-z-index تنشئ سياقات — وأن الأطفال لا يمكنهم الهروب منها — تسمح لك بتصحيح أخطاء الترتيب في الطبقات العلوية/القوائم المنسدلة وتنظيم DOM الخاص بك (portals) بشكل صحيح.