منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



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


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

شاطر|


بيانات كاتب الموضوع
الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس
كاتب الموضوعرسالة
المعلومات
الكاتب:
اللقب:

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس الدرس 15: طبقة فوق طبقة باستخدام z-index  سى اس اس Empty16/11/2014, 17:59

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




الدرس 15: طبقة فوق طبقة باستخدام z-index
يمكنها أن تتحكم بالأبعاد الثلاث, العرض والارتفاع والعمق، وقد تحدثنا بما فيه الكفاية عن العرض والارتفاع في الدروس السابقة، في هذ االدرس سنتعلم كيف نضع عناصر مختلفة في طبقات، باختصار هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض.
لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (
الكود:
z-index
)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى.
لنقل بأننا نريد ترتيب صور للعبة الورق، يجب أن نعطي لكل ورقة رقم
الكود:
z-index
:
الدرس 15: طبقة فوق طبقة باستخدام z-index  سى اس اس Figure020
في هذه الحالة الأرقام متتابعة (من 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;
   }
   















 الموضوع الأصلي : الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس الدرس 15: طبقة فوق طبقة باستخدام z-index  سى اس اس Empty2/12/2014, 19:11

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




جزاك الله كل خيرا علي الموضوع
المفيد والرقي















 الموضوع الأصلي : الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




الدرس 15: طبقة فوق طبقة باستخدام z-index سى اس اس

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» الدرس 8: تجميع العناصر باستخدام span وdiv
» الدرس 5: النصوص CSS
» الدرس 6: الروابط CSS
» الدرس 1: ما هي لغة PHP
» الدرس 15: القراءة من ملف نصي بى اتش بى



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام