ترتيب الكائنات !!

[الحق يعلو]

بسم الله الرحمن الرحيم

إخوتي عندي استفسار في كيفية ترتيب كائنات في نفس الصفحة ..

لنفرض لدي صفحة وضعت فيها كائنين كالتالي:

<div id="div1" style="position: absolute"></div>
<div id="div2" style="position: absolute"></div>

أريد عندما تكون إحداثيات left, top متساوية او عندما يكون الكائنين متلامسان ( فوق بعض تقريباً ) أن أحدد أي منهما يظهر في الأعلى .. هل يمكن ذلك ؟ وكيف يتم ؟؟

أنتظر الإجابة منكم في أقرب وقت ان شاء الله :con2:

وشكراً لكم لتعاونكم ...

[الحق يعلو]

خلص شكراً يا اخوان عالردود

أشكر الأستاذ المبدع خالد الهلابي ( hilaby ) لمساعدته لي وإعطائي الحل الصحيح وكلي أمل أن يكون الجميع بنفس المقدار من التعاون فنحن هنا في مجتمع كامل لنتعلم ونفيد ونستفيد :looking:

أود أن أذكر الحل لعل من يمر على الموضوع يجد به الفائدة ..
الحل في الخاصية z-index في الـ css ..

طبعاً لو كتبناها في كود الـ CSS العادي المعروف أو داخل الخاصية style للكائن نفس الشي ..

سوف أعود للمثال الذي طرحته في الموضوع ..

<div id="div1" style="position: absolute"></div>
<div id="div2" style="position: absolute"></div>

سوف نعرضهما بطريقة بحيث يظهر جزء من كل منهما في الخارج وجزء فوق الاخر .. :con2:

طبعاً حددنا لكل منهما خاصية الموضع ( 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 .... :con2:

الحل كما دلني عليه الأخ خالد مشكوراً ... هو في إعطاء قيم 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>

يمكنك تجربة الكود السابق ومشاهدة النتيجة التي ستبدو كهذه :


أما لو عكسنا قيم 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>

عند تنفيذ الكود السابق ستكون النتيجة كما يلي:


لاحظ الفرق بينها وبين نتيجة الكود السابق ....!!

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

تحياتي :nice:

[الفايق]

مشكور أخوي على الدرس الحلو هذا او التسائل زي ما تحب تسميها ..
وايضا اشكرا الاستاذ خالد ايضا على عدم اخفائه اي معلومة .. والله الموفق

[Zizwar]

ماشاء الله شكرا على الدرس وسلم لي على الأخ هيلابي، وقد سبق لي ان شرحت هذه الطريقة سنة 2004 في هذا الموضوع لكن بإعتماد جافاسكريبت http://www.swalif.net/softs/showpost...6&postcount=15
بالمناسبة لاتسمى كائنات، الكائنات في لغة لغة البرمجة اما div فهي تدعى أقسام لأنك تحجز بها قسم في الصفحة
وبارك الله فيكم

[الحق يعلو]

مشكور أخوي على الدرس الحلو هذا او التسائل زي ما تحب تسميها ..
وايضا اشكرا الاستاذ خالد ايضا على عدم اخفائه اي معلومة .. والله الموفق

العفو أخي ... إن شاء الله تكون استفدت ..ز

ماشاء الله شكرا على الدرس وسلم لي على الأخ هيلابي، وقد سبق لي ان شرحت هذه الطريقة سنة 2004 في هذا الموضوع لكن بإعتماد جافاسكريبت http://www.swalif.net/softs/showpos...26&postcount=15
بالمناسبة لاتسمى كائنات، الكائنات في لغة لغة البرمجة اما div فهي تدعى أقسام لأنك تحجز بها قسم في الصفحة
وبارك الله فيكم

العفو أستاذنا زيزوار ... الله يسلمك واصل إن شاء الله ....
حقيقة بحثت في المنتدى لكني لم أجد ما أريده من قبل لأني لم أعرف عن ماذا أبحث ...
شكراً على الرابط موضوع أكثر من رائع .. أفادني بشكل كبير جداً في مشروعي ..
بالمناسبة ، هل يمكن من بعد إذنك عزيزي زيزوار أن تضيف بريدي المتواضع لدى قائمتك في الماسنجر ... ؟!
إذا كان الجواب نعم فهذا بريدي Af_samhouri@hotmail.com ....

وهذا شرف لي انك تمر على هذا الموضوع .. بارك الله فيك

تحياتي، الحق يعلو ..
أو sBForum

[Zizwar]

الحق يعلو تمت لإظافة
sBForum ماذا يفعل هنا

[أحمد أبو النصر]

الحق يعلو هو sBForum متنكراً ..
تم قبول الإضافة ... ... عادي كثير احيان تلقى ازدواجية في الشخصية مثلي ..

شكراً لإضافتك لي وأتشرف بذلك ..

بالمناسبة نسيت أعلق على الكائنات ... صحيح انها ليست كائنات .. انا كنت على عجلة من امري لم اعرف ماذا اكتبها فقلت احسن شي كائنات لأنها فعلاً كائنات ( أي تكون على الصفحة ) ... لكني أعتقد أن التعبير الأصح هو العنصر Item أو المادة ... ولو كانت قسماً فهي صحيحة ... يا اخي التعابير قتلتنا ..

تحياتي، sBForum

[hilaby]

السلام.
شكراً على تنوية، وان شاء الله نساعدك في المزيد.

[Zizwar]

الحق يعلو هو sBForum متنكراً ..
تم قبول الإضافة ... ... عادي كثير احيان تلقى ازدواجية في الشخصية مثلي ..

شكراً لإضافتك لي وأتشرف بذلك ..

بالمناسبة نسيت أعلق على الكائنات ... صحيح انها ليست كائنات .. انا كنت على عجلة من امري لم اعرف ماذا اكتبها فقلت احسن شي كائنات لأنها فعلاً كائنات ( أي تكون على الصفحة ) ... لكني أعتقد أن التعبير الأصح هو العنصر Item أو المادة ... ولو كانت قسماً فهي صحيحة ... يا اخي التعابير قتلتنا ..

تحياتي، sBForum

اذا حضر عضوان يحذف ماسبق
بخصوص DIV مأخرا اصبحث انادها بالأقسام سابقا كنت أقول عنها صناديق، لكن أحسن ان الموقع اصبح محل خضار اذا كثرت الصناديق
وكما قلت التعابير مثل بعضها، الله يرزق فقط الصحة و السلامة :nice:
أخ hilaby ان شاء الله ومرحبا بك في قسمك

[أحمد أبو النصر]

استاذ خالد شكراً لمرورك ... وطبعاً ما نستغني عنك رح تشوف ان شاء الله الأسئلة ( واعذرنا عالأسئلة الغبية لسه طلاب علم ) << رح يعملي بلوك

أستاذنا زيزوار تذكرت انها Elements في النهاية هههههه ... وربنا يكرمك ويرزقك الصحة والسلامة ...
ما زلت أنتظر حضورك في الماسنجر ( وإلا ستسجل غائب ) ..

تحياتي، sBForum