هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: كيفية تطبيق خاصية position relative and overflow
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
تعلم استخدام position relative و overflow في CSS
استعد لتطوير مهاراتك في تصميم مواقع الويب مع درس جديد ومميز في CSS! في هذا الدرس، ستتعلم كيفية التحكم في مواضع العناصر باستخدام position relative و position absolute مع فهم دور خاصية overflow.
ما هي خاصية position relative؟
تُستخدم الخاصية position: relative لتحديد موضع العنصر نسبةً إلى مكانه الطبيعي في الصفحة. تُعتبر هذه الخاصية أساسية للتحكم في تصميم العناصر الداخلية بشكل دقيق.
نصائح لاستخدام position relative:
- استخدم قيمًا مثل percentage لتحديد الموضع بالنسبة لحجم العنصر الأب.
- تتيح لك هذه الخاصية احتواء العناصر الداخلية ذات خاصية position: absolute.
كيف تعمل خاصية position absolute؟
تتيح الخاصية position: absolute تحريك العنصر بالنسبة لأقرب عنصر أب يحمل خاصية position: relative. في حالة عدم وجود عنصر أب نسبي، يتحرك العنصر نسبةً إلى نافذة المتصفح.
لماذا نستخدم وحدات px و %؟
- الوحدات النسبية (%): تُستخدم للحصول على تصميم مرن يناسب جميع الشاشات.
- الوحدات الثابتة (px): تتيح دقة عالية في تحديد المواضع.
دور خاصية overflow في CSS
تُستخدم خاصية overflow للتحكم في كيفية عرض المحتوى الزائد عن مساحة العنصر. يمكنك الاختيار بين:
- visible: لعرض المحتوى بالكامل خارج الحدود.
- hidden: لإخفاء المحتوى الزائد.
- scroll: لإضافة شريط تمرير.
- auto: لإضافة شريط تمرير عند الحاجة فقط.
تتيح لك هذه الخاصية إنشاء تصميمات جذابة وتحسين تجربة المستخدم على الموقع.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي كيفية تطبيق خاصية position relative and overflow
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
ملفات السي اس اس اكواد تنسيق عناصر صفحة الويب لهذا الدرس
ملفات html اكواد تنسيق عناصر صفحة الويب لهذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
كتاب شرح مساعد لفهم Position,opacity,overflow,mouse events
- 230 دقيقة من الفيديوهات التفاعلية الحصرية
- 71 مصدر إضافي
- 41 ملحقات PDFs
- 3 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
كورس تعلم لغة CSS لإنشاء تصاميم وتنسيق مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
دورات تدريبية أخرى في برمجة
دبلوم بناء مواقع إنترنت تطبيقات تفاعلية عالية السرعة Mern-stack
دبلومة شاملة في تطوير تطبيقات الإنترنت تبدأ من الأساسيات مع HTML، CSS، وJavaScript، وتتعمق في تقنية Mern-stack باستخدام MongoDB، Express.JS، React.JS، وNode.JS....
مقالات ذات صلة
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
أساسيات لغة HTML لبناء صفحات ويب فعالة
تُعد متصفحات الويب (Web Browsers) واحدة من أهم الأدوات في عالم الإنترنت، حيث تُمكّن المستخدمين من تصفح مواقع الويب والوصول إلى المعلومات...
