خصائص zIndex

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

zIndex تحدد أو تعيّن خاصية ترتيب التركيب للعنصر الموضع.

العناصر التي لديها ترتيب التركيب الأعلى (1) تظهر دائمًا قبل العناصر التي لديها ترتيب التركيب الأدنى (0).

نصيحة:العناصر الموضوعة هي خاصية position يُحدد إلى:relative،absolute أو fixed العناصر.

نصيحة:هذه الخاصية مفيدة جدًا إذا كنت ترغب في إنشاء عناصر متداخلة.

انظر أيضًا:

دليل CSS التعليميتحديد CSS

دليل CSSخاصية zIndex

مثال

مثال 1

تغيير ترتيب التركيب لعنصر <img>:

document.getElementById("img1").style.zIndex = "1";

جرب بنفسك

مثال 2

تغيير قيمة خاصية z-index لعنصر <div>:

document.getElementById("myDIV").style.zIndex = "-1";

جرب بنفسك

مثال 3

إرجاع قيمة خاصية z-index لعنصر <img>:

alert(document.getElementById("img1").style.zIndex);

جرب بنفسك

النحو

إرجاع خاصية zIndex:

object.style.zIndex

تعيين خاصية zIndex:

object.style.zIndex = "auto|number|initial|inherit"

قيمة الخاصية

القيمة الوصف
auto يحدد المتصفح ترتيب التركيب للعنصر (بناءً على ترتيبه في المستند). افتراضي.
number عدد يحدد ترتيب التركيب للعنصر. يسمح بالقيم السلبية.
initial يُضبط هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصائص من العنصر الأم. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: auto
القيمة المعدلة: الخط النصي، يمثل ترتيب التركيب للعنصر.
إصدار CSS: CSS2

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم