الدرس 15: طبقة فوق طبقة باستخدام z-index
يمكنها أن تتحكم بالأبعاد الثلاث, العرض والارتفاع والعمق، وقد تحدثنا بما فيه الكفاية عن العرض والارتفاع في الدروس السابقة، في هذ االدرس سنتعلم كيف نضع عناصر مختلفة في طبقات، باختصار هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض.
لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (
z-index)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى.في هذه الحالة الأرقام متتابعة (من 1 إلى 5) لكن يمكن تحقيق نفس النتيجة باستخدام خمسة أرقام مختلفة، المهم هو الترتيب المتصاعد.
المثال أدناه يوضح كيفية ترتيب البطاقات:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
ترتيب العناصر فوق بعضها البعض سهل والإمكانيات كثيرة، يمكنك أن تضع الصور فوق النص أو النص فوق الصور أو تضع نصاً فوق نص ... إلخ.
ملخص
الطبقات يمكن استخدامها في الكثير من الحالات، فمثلاً جرب استخدام
z-index لإنشاء مؤثرات على العناوين بدلاً من استخدام الصور، فهذا يجعل الموقع أكثر سرعة ويعطيه فرصة للظهور في محركات البحث.
شكرا لك .. الى اللقاء


لاتنسى الاعجاب بصفحتنا عبر الفيس بوك لمتابعتة كل جديد وايضا من اجل التواصل معنا بشكل مباشر ومستمر.
تابعيمكنك الان متابعتنا عبر جوجل بلاس وارسال مقترحاتك وايضا حتى يصلك جميع الموضوعات الحصرية فور نشرها.
تابعتواصل دائما مع اصدقاء يشاركونك نفس الاهتمامات وذلك من خلال متابعة صفحتنا الرسمية عبر تويتر.
تابعيسعدنا أن تكون احد افراد عائلة ومحبى قناة رؤيا للمعلوميات وذلك عن طريق الاشتراك فى قناتنا على اليوتيوب.
تابع