اخر مواضيع عبدالصمد

عبدالصمد المازغي

مؤسس شركة نجمة بلس، مطور ويب

شرح مفصل حول z-index

السلام عليكم أحبابي في الله، لغة الـCSS من بين اللغات التي تتغير مع الوقت و كل تحديث لها تأتي بخصائص جديدة، درسنا اليوم لن يكون حول هذه الخصائص الجديدة لكن عكس ذالك سنحاول فهم طريقة استخدام خاصية الـZ-index لأن أغلب الأشخاص الذين تعلموا لغة الـCSS لم يستوعبوا ذالك رغم أنها خاصية جد رائعة وسهلة في التعامل و تغنيك من العديد من الأشياء.

كلنا نعرف أن عند كتابة عناصر في صفحة html تأتي العناصر واحد تلو الأخرى، أو بالأحرى عنصر أسفل عنصر، أو ما يعرف بـ"التراص الافتراضي"، و هنا يمكننا استخدام لغة الـCSS لحل هذه المشاكل و منها Z-index.

تستخدم خاصية z-index لترتيب العناصر فوق بعضها البعض بالإستعانة بالـHTML، لكن لا قيمة ولا نتيجة لها في حال عدم استخدام خاصية position (التي سبق و قمنا بتخصيص لها شرح سابقا، يمكنك قراءة ذالك من هنا)، إن لم توجد خاصية التموضع [position] فلن تعمل Z-index، شاهد المثال الحي لتفهم أكثر :

#1 أولا سنقوم بعمل خمسة أكواد html عادية ثم نضيف لهم ستايل عادي كالتالي :


#2 كما تلاحظون النتيجة، مربعات عادية وبعضها فوق بعض، الأن سنقوم بإضافة لها خاصية الـPosition و كذالك تحريك البعض منها نحو اليمين لتظهر بشكل واضح :

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

#3 ماذا لو قمنا باستخدام الـz-index فقط لبعض العناصر، و التعلاعب بالـposition :

كما تلاحظون أن العنصر الثالث لم يأتي بعض العنصرين الأول و الثاني، لماذا ؟ لأننا بكل بساطة لم نحدد له الـz-index، فقط قمنا بتحديد الـposition. أتمنى أن يكون الأمر واضحاً :).

#4 المثال الأخير و الذي سيساعدك على فهم ما سبق :
في المثال أعلاه، رغم أن najma2 له قيمة أكبر من najma3 إلا أن هذا الأخير يبقى دائما فوق، السبب هو "سياق التراص الإفتراضي" الذي ذكرناه في الأول و لأن العنصر najma1 يحمل قيمة 1 فالقيمة التي تأتي بعدها هي 2، مما يعني أن العنصر najma3 سيبقى دائما فوق العنصر najma2.

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

ليست هناك تعليقات:

إرسال تعليق

صفحة نجمة الرسمية

قناة نجمة الرسمية

الأكثر تصفحا

جميع الدورات

{"type":"footer-slider","label":"جميع الدورات","posts_number":"12"}

نجمة :

أحيانًا، عليكَ أن تلقِ نظرة على ماضيك، وتبتسم برضا على ما وصلت إليه