خاصية Z-Index
آخر تحديث: 2026-09-13
z-index خاصية Z-Index
تتحكم الخاصية z-index في ترتيب تكديس العناصر الموضوعة على طول المحور z العمودي على الشاشة؛ فالعناصر ذات القيمة الأكبر تُرسم فوق التي ذات القيم الأصغر. تُستخدم عادةً مع position لواجهات متعددة الطبقات مثل النوافذ المنبثقة (modals) والقوائم المنسدلة والطبقات العلوية.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | العناصر الموضوعة |
| نوع الحركة | integer |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
z-index: auto | <integer>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | لا ينشئ سياق تكديس جديدًا. |
<integer> | النوع | ترتيب تكديس صحيح؛ القيم الأكبر تُرسم في الأعلى. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| z-index | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： يتأثر بـ z-index العناصر التي موضعها غير static فقط؛ لا يؤثر تعيينه على عناصر في التدفق العادي.
مهم： مقارنات z-index لا تعمل إلا داخل نفس سياق التكديس. لا يمكن مقارنة القيم في سياقات تكديس مختلفة مباشرةً، ولا يمكن لـ z-index الخاص بابن أن يتجاوز حد سياق التكديس الأب.
❓ الأسئلة الشائعة
Qما قيمة z-index التي يجب أن أستخدم؟
Aفي معظم الحالات العملية، يكفي من 1 إلى 10؛ وتستخدم المشاريع الكبيرة أرقامًا مستديرة أو بالآلاف، مثل 9999 للنوافذ المنبثقة و1000 للطبقات العلوية. تجنّب الإفراط في قيم متطرفة مثل 999999: فبمجرد أن تتنافس عدة مكوّنات برفع z-index، تخرج الأرقام عن السيطرة وتصبح غير قابلة للصيانة. من الأفضل إبقاء z-index ضمن نطاق صغير وإدارة المستويات عبر متغيرات أو اتفاقيات.
Qلماذا لا يعمل z-index؟
Aالأسباب الشائعة: أولًا، العنصر ليس له موضع (position)، إذ لا يؤثر z-index إلا على العناصر الموضوعة وعناصر flex أو grid؛ ثانيًا، ينشئ أحد الآباء سياق تكديس عبر opacity أقل من 1 أو transform أو filter وغيرها، مما يحصر z-index الخاص بالابن داخله؛ ثالثًا، العنصران ليسا في نفس سياق التكديس ولا يشتركان في أبٍ مشترك، فلا يمكن مقارنتهما. صحّح هذه الثلاث بالترتيب.
Qما هو سياق التكديس؟
Aسياق التكديس هو منطقة معزولة للتكديس: فترتيب z-index لا يسري إلا داخل تلك المنطقة. يُنشأ بواسطة عناصر موضوعة بـ z-index غير auto، أو opacity أقل من 1، أو transform، أو filter، وعدة خصائص أخرى. لا يمكن لـ z-index الخاص بابن أن يتجاوز أبدًا حد سياق التكديس الأب، وهذا بالضبط سبب فشل النافذة المنبثقة أحيانًا في تغطية الخلفية (backdrop). والحل عادةً هو نقل العنصر المتداخل خارج ذلك السياق.
Qهل يعمل z-index فقط على العناصر الموضوعة؟
Aتقليديًا نعم، يُطبَّق z-index على العناصر الموضوعة، أي relative أو absolute أو fixed أو sticky. لكن في تخطيطات flex و grid، يمكن للعناصر استخدام z-index للتحكم في الترتيب المرئي حتى دون أن تكون موضوعة. ولا يمكن إعادة ترتيب العناصر في التدفق العادي غير الموضوعة عبر z-index، لذا إذا احتجت إلى تطبيق طبقات على عناصر عادية، أضف position:relative أولًا، فلا يكلّف شيئًا من حيث التخطيط ويفعّل z-index.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية position
تعرّف على الشروط المسبقة لكي يسري z-index.
سياق التكديس
افهم النطاق الذي يعمل ضمنه z-index.
