العودة إلى الدورة

الدرس 49: سياق التكديس و Z-Index

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

49. سياق التكديس و Z-Index

عندما تتداخل العناصر بسبب التموضع (relative, absolute, fixed, sticky) ، فإن z-index يحدد أي عنصر يظهر في الأعلى (أقرب إلى المستخدم).

خاصية Z-Index

  • تأخذ z-index عدداً صحيحاً (موجب أو سالب أو صفر).
  • العناصر ذات z-index الأعلى تتراكم فوق العناصر ذات z-index الأقل.

css .background-layer { position: absolute; z-index: 1; }

.overlay-menu { position: fixed; z-index: 1000; /* هذا يضمن أن القائمة تكون دائماً في الأعلى تقريباً */ }

القاعدة الحاسمة: إنشاء سياق تكديس

يعمل z-index فقط إذا كان العنصر متموضعاً (relative أو absolute أو fixed أو sticky). علاوة على ذلك، يقارن z-index فقط العناصر داخل نفس سياق التكديس.

يتم إنشاء سياق التكديس بواسطة:

  1. العنصر الجذري (<html>).
  2. عنصر بقيمة position غير static وقيمة z-index غير auto (مثل position: relative; z-index: 1;).
  3. يتم أيضاً إنشاء سياقات جديدة بواسطة عناصر Flexbox/Grid وخصائص معينة للشفافية/التحويل (opacity/transform).

المشكلة: إذا كان العنصر A في سياق 1 (z-index: 10) والعنصر B في سياق 2 (z-index: 1) ، فقد يظل العنصر B يظهر فوق العنصر A إذا كان السياق 2 نفسه مكدساً فوق السياق 1.