المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع

المتواجدون الآن ؟
ككل هناك 9 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 9 زائر :: 2 عناكب الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 559 عُضو.
آخر عُضو مُسجل هو أبو صابر فمرحباً به.

أعضاؤنا قدموا 10105 مساهمة في هذا المنتدى في 1977 موضوع

لونك المفضل

اعلان هــــــام

استايل منتدى تقنيات الحالى للبيع لمزيد من التفاصيل مراسلة الأخ omarpop23


منتديات تقنيات :: دورات ودروس منتديات تقنيات :: 

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

avatar

(شرح) خاصية 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;
}

ستكون النتيجة بالشكل التالي:
http://i61.tinypic.com/33et0t2.png

الآن سنعطي خاصية 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
للتوضيح أكثر
http://i59.tinypic.com/1tahaf.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





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


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





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

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

طرحت فأبدعت

دمت ودام عطائك
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

سجل دخولك أو انشئ حساب لترك رد

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

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


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

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول