[CSS] خاصية z-index وطرق استخدامها بالتفصيل

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.

[CSS] خاصية z-index وطرق استخدامها بالتفصيل

خاصية z-index في الـ CSS هي من الخصائص الجميلة حقيقة وتكمن فائدتها في ترتيب العناصر فوق بعضها البعض , لاكن هذه الخاصية ليس لها فائده بدون position , لذالك لنجعلها تعمل بنجاح نحتاج الى وضع position في نفس الديف الذي هي به.

نبداء بالامثلة والتطبيق : 

سنقوم بأنشاء 2 div هكذا : 

<div class="box1"></div>
<div class="box2"></div>

وستكون لهما خصائص css : 

div{
  width: 200px;
  height: 200px;
}
div.box1{
  background-color: #d50000;
}
div.box2{
  background-color: #4a148c;
}

ستكون النتيجة الطبيعيه هكذا : 

الآن سنعطي خاصية z-index للعنصرين، بحيث يكون الـ div.box2 فوق الـ div.box1، وسنلاحظ النتيجة :

div.box1{
  z-index: 1;
}
div.box2{
  z-index: 2;
}

في الكود السابق، من المفترض أن يصبح العنصر div.box2 فوق العنصر div.box1، ولكن عندما نشاهد النتيجة فلن يتغير أي شيء عن السابق، لماذا؟
لأن العناصر لا تحمل خاصية position، أي كما ذكرنا في السابق، أن خاصية z-index لا تعمل إلا مع خاصية position
لذا سنعطيها الخصائص التالية :

div{
  position: absolute;
}

ستكون النتيجة كالتالي :

الآن لتوضيح الخصائص السابقة، ينغير مكان كل عنصر :

div.box1{
  left: 100px;
  top: 100px;
}
div.box2{
  left: 200px;
  top: 200px;
}

ستكون النتيجة كالتالي :

انتهينا.


الآن سنشرح الجزء الأهم، والذي يواجه الجميع مشكلة فيه، سنشرحها بتطبيق عملي،
الآن سنضيف عنصر جديد div.box1-2 داخل العنصر الأب div.box1
ليصبح الكود كالتالي:

<div class="box1">
  <div class="box1-2"></div>
</div>
<div class="box2"></div>

كود css الخاص به سيكون بالشكل التالي :

 div.box1-2{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: #00bfa5;
}

ستكون النتيجة بالشكل التالي :

الآن المشكلة التي تواجه البعض، هو أنه يريد إن يجعل العنصر div.box1-2 فوق كل شيء، فيعطيه الخاصية بالشكل التالي :

div.box1-2{
  z-index: 9999;
}

رغم أننا أعطينا الخاصية z-index أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو : 

للتوضيح أكثر :

الترتيب النهائي الذي سيظهر لنا على المتصفح كالتالي:

1- div.box1
2- div.box1-2
3- div.box2

س/ ما السبب أن العنصر div.box1-2 لم يكن أعلى العناصر من حيث الترتيب، رغم حصوله على أعلى قيمة ؟

السبب واضح، لأن العنصر div.box1-2 موجود داخل أب وهو div.box1 له ترتيب أقل من العنصر الآخر الموجود فوق كل شيء وهو div.box2


الشرح منقول "  كتبه : محمد الحلبي في ترايدنت للفائدة.