السلام عليكم أحبابي في الله في هذا الدرس الذي سوف يتمحور حول خاصية الـposition، خاصية مهمة جدا في لغة الــCSS، كنت أريد أن أشرحها في دورة الــCSS لكن بعد ذالك فكرت أن أضع لها درس خاص و شرح كامل لهذه الخاصية لوحدها.
أترككم تتعرفون عليها بالتفصيل.
⇚ تعريف لخاصية الــposition :
خاصية الـposition كما يوضح اسمها، "التَمَوْضُع"، موقع أو موضع الشيء، فخاصية الـposition وظيفتها هي بكل بساطة تقسيم و تحديد مكان، موضع لكل عنصر في الموقع، لكن على كل مصمم مبرمج أو مصمم مواقع فقط أن يستوعب كيفية التعامل معها حتى لاتكون هناك مشاكل في الاكواد.
⇚ ماهي القيم التي تأخدها خاصية الـposition :
كلنا نعرف ان تقريبا جميع الخصائص تأخد قيم متغييرة و لكل واحدة ميزة خاصة، فكذالك خاصية الـposition تأخد أربعة قيم مختلفة و تختلف وظيفة كل واحدة منها.
1. Static
2. relative
3. absolute
4. fixed
◁ قيمة Static :
هذه القيمة التي تأخدها خاصية الـposition تعني أن العنصر الذي سيتم إضافتها اليه سوف يكون ثابت في مكانه ولن يتم تحريكه حتى وإن أضفت اليه خصائص الـLeft و Right و Top و Bottom يعني أنها لاتؤثر فيها حتى و إن وضعتها.
مثال حي للمعاينة :
◁ قيمة Relative :
قيمة relative أو 'النسبي'، يقوم بتحديد مكان العنصر نسبة الى العناصر الاخرى، فهو تابع دائما للقيمة السابقة ومتناسب مع أقرب العناصر له و عكس القيمة السابقة فهو يمكن أن يؤثر بـإحداثيات التموضع (يمين،يسار،فوق،تحت).
مثال حي للمعاينة :
هذه القيمة التي تأخدها خاصية الـposition تعني أن العنصر الذي سيتم إضافتها اليه سوف يكون ثابت في مكانه ولن يتم تحريكه حتى وإن أضفت اليه خصائص الـLeft و Right و Top و Bottom يعني أنها لاتؤثر فيها حتى و إن وضعتها.
مثال حي للمعاينة :
◁ قيمة Relative :
قيمة relative أو 'النسبي'، يقوم بتحديد مكان العنصر نسبة الى العناصر الاخرى، فهو تابع دائما للقيمة السابقة ومتناسب مع أقرب العناصر له و عكس القيمة السابقة فهو يمكن أن يؤثر بـإحداثيات التموضع (يمين،يسار،فوق،تحت).
مثال حي للمعاينة :
◁ قيمة Absolute :
هذه القيمة تعتبر الوضع الحر للعنصر يعني أنه لا يتأثر بقيم و خصائص العناصر الأخرى، يعني أن هذه القيمة تجعل العنصر مستقل و حر في الموقع، ويتغيير على حسب الشاشة. العنصر كما قلنا أنه لا يتاثر بالعناصر الأخرى.
مثال حي للمعاينة :
◁ قيمة Fixed:
هذه القيمة شبيهة نوعا ما بالقيمة السابقة بحيث أن العنصر يظهر فوق جميع العناصر الاخرى و لايتأثر بخصائصها، لكن قيمة "ثابت" يعني أن العنصر سيظهر فوق جميع العناصر مهما كانت قيمتها و أيضا سيظر دائما في الصفحة حتى و إن قمت بتمريرها، هذه القيمة تستعمل كثيراً في القوائم.
مثال حي للمعاينة :
⇚ خلاصة الموضوع :
خاصية الـposition من أهم الخصائص التي على كل مبرمج أو مصمم مواقع أن يتقنها و يعرف كيفية العمل بها، خصوصا أن أصبح استعمالها بكثرة في المواقع الحديثة، وهناك قيم أخرى تمت إضافتها حديثا لكن لم يتم التعريف عليها رسميا من طرف جميع المتصفات، فهناك بعض المتصفحات التي لاتدعمها و في بعض الأحيان تقع مشاكل إن لم يدعمها. و في الاخير أتمنى أنك فهمت الدرس جيداً، لاتنسى لايك و مشاركة الموضوع حتى نقدم لكم الأفضل إن شاء الله.
zaki
مشرف مجموعة وثائق الاستاذ لجميع المستويات و مؤلف بالموقع .
شغفنا و حبنا لتقديم الجديد و الرقي بمهنة التدريس و مساعدة الأساتذة الكرام على أداء مهامهم على أكمل وجه
يدفعنا للإستمرار و العطاء و تقديم ما هو حصري بشكل يتماشى و مستجدات التربية و التكوين
و هوهدف لن يتحقق و يستمر إلا بفضل دعمكم لنا و تشجيعاتكم و اقتراحاتكم و تقديم اراءكم
.أعاننا الله و إياكم
