خلص شكراً يا اخوان عالردود
أشكر الأستاذ المبدع خالد الهلابي (
hilaby ) لمساعدته لي وإعطائي الحل الصحيح وكلي أمل أن يكون الجميع بنفس المقدار من التعاون فنحن هنا في مجتمع كامل لنتعلم ونفيد ونستفيد
أود أن أذكر الحل لعل من يمر على الموضوع يجد به الفائدة ..
الحل في الخاصية z-index في الـ css ..
طبعاً لو كتبناها في كود الـ CSS العادي المعروف أو داخل الخاصية style للكائن نفس الشي ..
سوف أعود للمثال الذي طرحته في الموضوع ..
كود:
<div id="div1" style="position: absolute"></div>
<div id="div2" style="position: absolute"></div>
سوف نعرضهما بطريقة بحيث يظهر جزء من كل منهما في الخارج وجزء فوق الاخر ..
طبعاً حددنا لكل منهما خاصية الموضع ( position ) بـ absolute حتى نتمكن من تحديد موضع كل منهما بالبكسل بالتحديد في الصفحة .. ( تحديد الموقع بشكل حر ) ...
الآن نقوم بتكبير كل منهما ( width, height ) حتى يتبين لنا المثال بوضوح ..
كود:
<div id="div1" style="position: absolute; width: 200; height: 50"></div>
<div id="div2" style="position: absolute; width: 200; height: 50"></div>
هنا حددنا لكل منهما العرض : 200 والارتفاع 50 وطبعاً هذه فقط حتى يتضح المثال ليس لها علاقة بالمطلوب نهائياً ...
الآن نريد تحديد لون خلفية كل منهما بحيث نميزهما عندما نضعهما فوق بعضهما ..
كود:
<div id="div1" style="position: absolute; width: 200; height: 50; background-color: #000000"></div>
<div id="div2" style="position: absolute; width: 200; height: 50; background-color: #00ff00"></div>
قمنا بتحديد خاصية background-color لكل منهما بلون .. الاول #000000 وهو الاسود .. والثاني #00ff00 وهو الفسفوري Lime ...
الآن سوف نضع احداثياتهما بطريقة معينة بحيث تكون القطعة الاولى فوق الثانية ... او جزء منها ..
كود:
<div id="div1" style="position: absolute; width: 200; height: 50; background-color: #000000; top: 5px; left: 5px"></div>
<div id="div2" style="position: absolute; width: 200; height: 50; background-color: #00ff00; top: 30px; left: 30px"></div>
قمنا بوضع احداثيات الأول 5,5 .. والثاني 30,30 .. وهكذا سوف تظهر القطعة الثانية فوق الأولى اذا نظرنا لها من الخارج .. ولكنها أسفل منها في الاحداثيات .. اي ان هناك جزء من القطعة الاولى مختفٍ وراء الثانية .. الان .. هدف الموضوع كله أصلاً أن نقوم بعملية عكسية .. فربما أريد أن تظهر القطعة الأولى فوق الثانية وليس شرطاً ان تظهر القطعة التي رسمت في النهاية فوق التي رسمت قبلها في المتصفح عن طريق لغة HTML ....
الحل كما دلني عليه الأخ خالد مشكوراً ... هو في إعطاء قيم z-index بنفس طريقة الخصائص السابقة في كود الـ style .. او css .. وذلك كما يلي:
فالقطعة التي تاخذ قيمة z-index أقل تكون في الخلف .. أي أن الترتيب يبدأ من الخلف إلى الأمام ..
القطعة التي تاخذ القيمة 1 تكون خلف كل شيء امامها ..
القطعة 2 امام الاولى . ( فوقها ) ..
القطعة 3 امام الاولى والثانية ... وهكذا ....
لذلك نحن نريد أن نظهر القطعة الأولى فوق الثانية .. فسوف نعطي الأولى 2 ( أي انها في الامام ) والثانية 1 ( أي أنها في الخلف ) ...
كود:
<div id="div1" style="position: absolute; width: 200; height: 50; background-color: #000000; top: 5px; left: 5px; z-index: 2"></div>
<div id="div2" style="position: absolute; width: 200; height: 50; background-color: #00ff00; top: 30px; left: 30px; z-index: 1"></div>
يمكنك تجربة الكود السابق ومشاهدة النتيجة التي ستبدو كهذه :
.png)
أما لو عكسنا قيم z-index بحيث أردنا أن تظهر القطعة الثانية فوق الأولى ( وهي الوضع الافتراضي ) فإننا سوف نعطي القطعة الأولى قيمة z-index تساوي 1 والثانية القيمة 2 كما اتفقنا سابقاً ... وهي نفس الوضع الافتراضي حيث أن القطعة التي رسمت في النهاية ستظهر أمام ( فوق ) ما رسم قبلها ...
كود:
<div id="div1" style="position: absolute; width: 200; height: 50; background-color: #000000; top: 5px; left: 5px; z-index: 1"></div>
<div id="div2" style="position: absolute; width: 200; height: 50; background-color: #00ff00; top: 30px; left: 30px; z-index: 2"></div>
عند تنفيذ الكود السابق ستكون النتيجة كما يلي:
.png)
لاحظ الفرق بينها وبين نتيجة الكود السابق ....!!
أتمنى أن تكون قد وضحت الصورة وكيفية استخدام z-index ... وأكرر الشكر للأخ خالد لمساعدته حيث أني كنت في أمس الحاجة لها ...
تحياتي
إن شاء الله تكون استفدت ..ز
