منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


(شرح) خاصية z-index بالتفصيل، وشرح مشكلتها

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

(شرح) خاصية z-index بالتفصيل، وشرح مشكلتها

مُساهمة من طرف وهبة الساحر في 03/11/16, 03:51 pm


(شرح) خاصية z-index بالتفصيل، وشرح مشكلتها

(شرح) خاصية z-index بالتفصيل، وشرح مشكلتها





نبدأ اليوم على بركة الله عز وجل بشرح خاصية في css
الخاصية ربما يعرفها الكثير، ولكن لها عدة مزايا، ويواجه البعض مشاكل عدة فيها، سيتم شرح الخاصية بالكامل، من مميزات وخصائص ومشاكل يواجهها البعض في هذه الخاصية، وهي خاصية z-index

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

سنقوم بإنشاء div عدد 2 بالشكل التالي:

الرمز:
<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;
}

ستكون النتيجة كالتالي:
http://i60.tinypic.com/2d9b66t.png

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

الرمز:
div.box1{
  left: 100px;
  top: 100px;
}
div.box2{
  left: 200px;
  top: 200px;
}

ستكون النتيجة كالتالي:
http://i58.tinypic.com/sn2jb8.png
إلى هنا وصلنا لعمل خاصية z-index.

الآن سنشرح الجزء الأهم، والذي يواجه الجميع مشكلة فيه، سنشرحها بتطبيق عملي،
الآن سنضيف عنصر جديد 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;
}

ستكون النتيجة بالشكل التالي:
http://i61.tinypic.com/1zzkuhk.png
الآن المشكلة التي تواجه البعض، هو أنه يريد إن يجعل العنصر
div.box1-2 فوق كل شيء، فيعطيه الخاصية بالشكل التالي:

الرمز:
div.box1-2{
  z-index: 9999;
}

رغم أننا أعطينا الخاصية z-index أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو
http://i57.tinypic.com/2yxhis7.png
للتوضيح أكثر



الترتيب النهائي الذي سيظهر لنا على المتصفح كالتالي:
1- div.box1
2- div.box1-2
3- div.box2

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

النتيجة النهائية للعمل من خلال الرابط التالي: http://codepen.io/Qlbaz/pen/KwKBeP





تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد


ارجوا ان اكون قد افدتكم
انتهي الموضوع





وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     


وهبة الساحر
ادارة المنتدى


الجنس : ذكر
عدد المساهمات : 335
التقييم : 61
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: (شرح) خاصية z-index بالتفصيل، وشرح مشكلتها

مُساهمة من طرف aiglemaster في 08/12/16, 11:52 pm

موضوع فى قمة الخيااال

طرحت فأبدعت

دمت ودام عطائك



aiglemaster
عضو نشيط


الجنس : ذكر
عدد المساهمات : 86
التقييم : 11
تاريخ التسجيل : 05/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى