خاصية z-index في لغة CSS تُستخدم لتحديد ترتيب تراكب العناصر على المحور Z (المحور العمودي أو العمق). بمعنى آخر، تُحدد هذه الخاصية أي عنصر سيظهر فوق عنصر آخر عندما يتداخلان.

تُستخدم خاصية z-index فقط مع العناصر التي تم تحديد موضعها (positioned elements)، أي العناصر التي لديها قيمة للخاصية position غير static. قيم position التي تُفعّل z-index هي:

  • relative
  • absolute
  • fixed
  • sticky

قيم z-index:

تأخذ خاصية z-index قيمًا رقمية صحيحة، سواء كانت موجبة أو سالبة أو صفر.

  • قيم موجبة: تُظهر العنصر فوق العناصر الأخرى التي لديها قيم z-index أقل. كلما زادت القيمة، زاد ارتفاع العنصر في الترتيب.
  • صفر: هي القيمة الافتراضية، وتعني أن العنصر يظهر في ترتيبه الطبيعي في شفرة HTML.
  • قيم سالبة: تُظهر العنصر تحت العناصر الأخرى التي لديها قيم z-index أعلى أو صفر.

كيف يعمل z-index؟

عندما يتداخل عنصران أو أكثر، يتم تحديد ترتيب ظهورهما بناءً على القيم التالية (بالترتيب):

  1. ترتيب ظهور العناصر في شفرة HTML: إذا لم يتم تحديد قيمة z-index لأي من العناصر المتداخلة، فإن العنصر الذي يظهر لاحقًا في شفرة HTML سيظهر فوق العنصر الذي يسبقه.
  2. قيمة z-index: إذا تم تحديد قيم z-index للعناصر المتداخلة، فإن العنصر ذو القيمة الأعلى سيظهر فوق العناصر الأخرى.
  3. سياقات التكديس (Stacking Contexts): تُنشئ بعض الخصائص سياقات تكديس جديدة، مما يُؤثر على كيفية عمل z-index. من بين الخصائص التي تُنشئ سياقات تكديس:
    • العنصر الجذري للمستند (<html>)
    • العناصر التي لديها قيمة position غير static وقيمة z-index غير auto
    • العناصر التي لديها خاصية opacity بقيمة أقل من 1
    • العناصر التي لديها خاصية transform بقيمة غير none
    • العديد من الخصائص الأخرى (مثل filter، isolation، mix-blend-mode)

عندما يتم إنشاء سياق تكديس جديد، فإن قيم z-index للعناصر داخله تُصبح نسبية لهذا السياق فقط، ولا تُقارن بقيم z-index للعناصر خارج هذا السياق.

مثال:

HTML
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
CSS
.box {
  width: 100px;
  height: 100px;
  position: absolute; /* ضروري لاستخدام z-index */
}

.box1 {
  background-color: red;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.box2 {
  background-color: blue;
  top: 50px;
  left: 50px;
  z-index: 1;
}

في هذا المثال، سيظهر المربع الأحمر (Box 1) فوق المربع الأزرق (Box 2) لأن لديه قيمة z-index أعلى (2 مقابل 1).

ملاحظات مهمة:

  • استخدام قيم z-index عالية جدًا (مثل 9999) ليس ضروريًا دائمًا وقد يُسبب مشاكل في المستقبل. من الأفضل استخدام قيم صغيرة نسبيًا وتحديدها بعناية.
  • فهم سياقات التكديس مهم جدًا لفهم كيفية عمل z-index بشكل صحيح.
  • قد يُؤدي الإفراط في استخدام z-index إلى تعقيد شفرة CSS وجعلها صعبة الصيانة.

باختصار، تُعتبر خاصية z-index أداة قوية للتحكم في ترتيب تراكب العناصر، ولكن يجب استخدامها بحذر وفهم كيفية عملها مع سياقات التكديس.