z-index حل مشكلة ترتيب القائمة المنسدلة التي تظهر اسفل باقي العناصر

حل مشكلة ترتيب القائمة المنسدلة التي تظهر اسفل باقي العناصر

السلام عليكم ورحة الله وبركاتة اليوم انشاء الله سوف نتحدث عن مشكلة يقع بها الكثير من المبتدئين في التصميم الا وهي ترتيب العناصر لتظهر بشكل منسق وكما تريد

مثال للمشكلة التي نتحدث عنها من مترو ويب 2 مدونتنا التجريبيه

* الخاصية z-index *

عندما تحدد مكان عدد من العناصر ، و تجد أنهم تداخلوا فوق بعض ، استخدم هذه الخاصية لتحدد أيهم سوف تظهر فوق الأخرى :

h2 { position: relative; left: 10px; top: 0px; z-index: 10 } h1 { position: relative; left: 33px; top: -45px; z-index: 1 }

بما أن الوسم h2 أخذت القيمة الأعلى للخاصية z-index فهي التي سوف تظهر فوق الوسم h1 . ( المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية ) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . ( مع المتصفح NS من الأفضل أن تحيط الوسم < IMG > بإحدى الواصفتين < SPAN > أو < DIV > ثم تطبق الخاصية على أحداهما بدلاً من الوسم < IMG > ) .

و حتى نفهم هذه الخاصية، سوف نقوم بتطبيقها عملياً، حيث نقوم أولاً بإنشاء ثلاثة صناديق:

.box1 {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #F1F1F1;
position: relative;
z-index: 1;
}
.box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #F1F1F1;
position: relative;
z-index: 2;
top: -70px;
right: 30px;
}
.box3 {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #F1F1F1;
position: relative;
z-index: 3;
top: -140px;
right: 60px;
}

هكذا نكون قد أنشأنا ثلاثة صناديق، بعرض 100 بكسل لكل صندوق وارتفاع 100 بكسل، وحددنا لكل صندوق إطاراً ولوناً رمادياً للخلفية، ثم حددنا خاصية z-index للصندوق الأول بالرقم واحد وللثاني بالرقم اثنان وللثالث بالرقم ثلاثة، ماذا يعني ذلك ؟ سنرى الآن.
box1
box2
box3
ما الذي حدث هنا؟ الصناديق الثلاثة فوق بعضها البعض، وقد رتبناها بهذه الطريقة عن طريق خاصية z-index، ماذا لو غيرنا قيم خاصية z-index بالتأكيد سوف يتغير الترتيب .
فإذا وضعنا القيمة 3 للصندوق الأول والقيمة 2 للصندوق الثاني والقيمة 1 للصندوق الثالث، يتم تغيير ترتيبها، وهكذا عن طريق صفة z-index تستطيع أن تضع عناصر أي تصميم فوق بعضها البعض وبالترتيب الذي تريد، وفائدة هذه الصفة غير محدودة، فيمكن وضع الصور فوق بعضها البعض أو دمج العناوين والنصوص لتخرج بشكل فني رائع، وحتى تفهم وظيفة هذه الصفة بشكل دقيقة لابد من التطبيق العملي . 

يعني لو كان موجود الكود التالي

position: relative;

اضف بعده كود

z-index: 2;

 وملحوظة كلما كان رقم الترتيب (2) أعلي كلما كانت لة اولوية الظهور فوق كل كل شيئ وان كان الكود position: relative; غير موجود فضعه في Li الاول مثال

#muin li {
    float: right;
    margin-top: 5px;
    padding: 0px;
    position: relative;
    z-index: 2;
    color: #FFF;
}

للتوضيح بالصور 

الترتيب القائمة الاولي والثانية

القائمة الثانية

 

القائمة الاولي

لأي استفسار التعليقات أسفل الشرح

ولكم كل توفيق انشاء الله

Tweet