خاصية CSS z-index

تعريف والاستخدام

تحدد خاصية zIndex ترتيب الت堆افة للعنصر. العنصر ذو ترتيب ت堆افة أعلى دائمًا في المقدمة من العنصر ذو الترتيب الت堆افة الأدنى.

ملاحظة:يمكن لعنصر أن يكون له قيمة z-index سالبة.

ملاحظة:Z-index يعمل فقط على العناصر المحددة (مثل position:absolute;)!

شرح

يحدد هذه الخاصية موقع العنصر المحدد في طول z الذي يُعرف بأنه محور تنقل عموديًا إلى منطقة العرض، إذا كان الرقم إيجابيًا، فإنه أقرب إلى المستخدم، وإذا كان سالبًا، فإنه أقل.

انظر أيضًا:

دليل CSSتوضيح CSS

دليل HTML DOMخاصية zIndex

مثال

تعيين z-index للصورة:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

جرب بنفسك

نحوية CSS

z-index: تلقائي|رقم|مبدئي|تنقل;

قيمة الخاصية

القيمة الوصف
تلقائي افتراضي. ترتيب الت堆افة يساوي عنصر الأب.
رقم يحدد ترتيب الت堆افة للعنصر.
تنقل يحدد يجب أن يستمر من عنصر الأب قيمة الخاصية z-index.

تفاصيل تقنية

القيمة الافتراضية: تلقائي
تنقل: لا
الإصدار: CSS2
جافا سكريبت نحوية: object.style.zIndex="1"

مزيد من الأمثلة

Z-index
Z-index يمكن استخدامها لوضع عنصر بعد عنصر آخر.
Z-index
العنصر في المثال السابق قد تم تغيير Z-index.

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0