{css} : خاصية ( z:index )

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

خاصية z-index في الـ CSS مهمتها هي ترتيب العناصر فوق بعضها البعض 

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

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

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

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

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

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

الآن سنعطي خاصية z-index للعنصرين، بحيث يكون الـ .box2 فوق الـ .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 أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو : 

للتوضيح بـ 3D :

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

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