مُؤشر - Z index

نبذة عن مُؤشر Z

• الخاصية التي تُحدد ترتيب العناصر المكدسة على صفحة الويب.
• يُحدد العناصر التي تظهر في المقدمة أو الخلفية عند تداخلها.

القيم الأساسية لمُؤشر Z

• Z-index: auto: القيمة الافتراضية، حيث يتم ترتيب العناصر حسب تسلسلها في الكود.
• Z-index: 0: تضع العنصر في مستوى محايد، خلف العناصر ذات القيم الإيجابية.
• Z-index: 1: تضع العنصر في مستوى أعلى من العناصر ذات القيم الأقل.
• القيم الإيجابية: تُعطي العنصر مستوى أعلى في المكدس.
• القيم السلبية: تُعطي العنصر مستوى أدنى في المكدس (مخفيًا خلف العناصر الأخرى).

مثال CSS لتكديس العناصر في طبقات

.element1 {
  z-index: 1;
  background: red;
}

.element2 {
  z-index: 2;
  background: blue;
}

.element3 {
  z-index: -1;
  background: green;
}

في هذا المثال:

• سيكون element2 في المقدمة لأنه يحتوي على أعلى قيمة "مُؤشر Z" (2).
• سيكون element1 في الخلفية مباشرة لأنه يحتوي على القيمة التالية الأعلى (1).
• سيكون element3 مخفيًا لأنه يحتوي على قيمة "مُؤشر Z" سالبة (-1).