كورس css | تنسيق position باستخدام لغة css #11


النموذج التعليمي


   عنوان المحاضرةتنسيق position باستخدام لغة CSS 
   ترتيب المحاضرةالمحاضرة الحادية عشر
   مدة المحاضرة20:53
   نوع الكورسcss
   نوع الدورةدورة تصميم مواقع




ما هو position في لغة css 

عنصر position هو المسؤول عن مكان و موضع العنصر المراد تنسيقه و ل position خيارات كثيرة و كل خيار له تأثير مختلف فهيا لنكتشفهم جميعاً

للعنصر position اتجاهات تكتب تحته مثل top bottom right left و لكن لكي تستخدم تلك الاتجاهات يجب كتابة position في الاول و اختيار خيار مناسب له

لدينا خمس خيارات للعنصر position

Static

Relative

Absolute

Fixed

Sticky

Position: static

هذه هي القيمة الافتراضية لاي عنصر و تكون محددة مسبقاً و بما انها وضعية افتراضية فلا يجوز وضع الاتجاهات تحتها و تكتب كتالي


div{

position:static;

}

Position: relative


هو من القيم الاكثر استخدام حيث يعتبر موضع نسبي و يمكنك التحكم في الاتجاهات من خلاله

div{ position: relative; top: 10px; bottom: 150px; right: 50px; left: 30px; }


Position: fixed


هو عنصر ثابت و باقي في مكانه في الصفحة حتى لو تم تمرير الصفحة فهو سيبقى في نفس المكان و يسمح بتحديد الاتجاهات من خلاله

div{ position: position; top:0; left: 10px; }

Position: absolute

هو عنصر يتم تحديد خصائصه من أقرب عنصر له و اذا لم يجد عنصر ما تم وضع تنسيق position له فإنه يتم تحديد موقعه فوق الملف الرئيسي و ايضا يتم تحديد اتجاها له 

div{ position: absolute; right: 50px; }

Position: sticky

هذا العنصر يتم تحديد خصائصه بناء على العنصر fixed و relative حيث ينتقبل بينهم و يلتصق في مكانه بعدها 


div{ position: sticky; top:0; }




No comments:

Post a Comment