السلام عليكم أحبابي في الله، لغة الـ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 :
#3 ماذا لو قمنا باستخدام الـz-index فقط لبعض العناصر، و التعلاعب بالـposition :
كما تلاحظون أن العنصر الثالث لم يأتي بعض العنصرين الأول و الثاني، لماذا ؟ لأننا بكل بساطة لم نحدد له الـz-index، فقط قمنا بتحديد الـposition. أتمنى أن يكون الأمر واضحاً :).
#4 المثال الأخير و الذي سيساعدك على فهم ما سبق :
في المثال أعلاه، رغم أن najma2 له قيمة أكبر من najma3 إلا أن هذا الأخير يبقى دائما فوق، السبب هو "سياق التراص الإفتراضي" الذي ذكرناه في الأول و لأن العنصر najma1 يحمل قيمة 1 فالقيمة التي تأتي بعدها هي 2، مما يعني أن العنصر najma3 سيبقى دائما فوق العنصر najma2.
أتمنى من صميم القلب أن هذه التدوينة قد نالت إعجابك، لاتنسى مشاركتها مع أصدقائك، و أتمنى كذالك أنك فهمت طريقة عمل z-index، فهي مهمة جداً، حاول نسخ الأكواد و ضعها في ملف على محرر أكود و قم بتحليلها لتفهم أكثر، أما أنا فأراك في درس اخر...
#4 المثال الأخير و الذي سيساعدك على فهم ما سبق :
في المثال أعلاه، رغم أن najma2 له قيمة أكبر من najma3 إلا أن هذا الأخير يبقى دائما فوق، السبب هو "سياق التراص الإفتراضي" الذي ذكرناه في الأول و لأن العنصر najma1 يحمل قيمة 1 فالقيمة التي تأتي بعدها هي 2، مما يعني أن العنصر najma3 سيبقى دائما فوق العنصر najma2.
أتمنى من صميم القلب أن هذه التدوينة قد نالت إعجابك، لاتنسى مشاركتها مع أصدقائك، و أتمنى كذالك أنك فهمت طريقة عمل z-index، فهي مهمة جداً، حاول نسخ الأكواد و ضعها في ملف على محرر أكود و قم بتحليلها لتفهم أكثر، أما أنا فأراك في درس اخر...
zaki
مشرف مجموعة وثائق الاستاذ لجميع المستويات و مؤلف بالموقع .
شغفنا و حبنا لتقديم الجديد و الرقي بمهنة التدريس و مساعدة الأساتذة الكرام على أداء مهامهم على أكمل وجه
يدفعنا للإستمرار و العطاء و تقديم ما هو حصري بشكل يتماشى و مستجدات التربية و التكوين
و هوهدف لن يتحقق و يستمر إلا بفضل دعمكم لنا و تشجيعاتكم و اقتراحاتكم و تقديم اراءكم
.أعاننا الله و إياكم
