-->

شرح مفصل لخاصية Position

السلام عليكم أحبابي في الله في هذا الدرس الذي سوف يتمحور حول خاصية الـposition، خاصية مهمة جدا في لغة الــCSS، كنت أريد أن أشرحها في دورة الــCSS لكن بعد ذالك فكرت أن أضع لها درس خاص و شرح كامل لهذه الخاصية لوحدها.
أترككم تتعرفون عليها بالتفصيل.

⇚ تعريف لخاصية الــposition :

خاصية الـposition كما يوضح اسمها، "التَمَوْضُع"، موقع أو موضع الشيء، فخاصية الـposition وظيفتها هي بكل بساطة تقسيم و تحديد مكان، موضع لكل عنصر في الموقع، لكن على كل مصمم مبرمج أو مصمم مواقع فقط أن يستوعب كيفية التعامل معها حتى لاتكون هناك مشاكل في الاكواد.


⇚ ماهي القيم التي تأخدها خاصية الـposition : 

كلنا نعرف ان تقريبا جميع الخصائص تأخد قيم متغييرة و لكل واحدة ميزة خاصة، فكذالك خاصية الـposition تأخد أربعة قيم مختلفة و تختلف وظيفة كل واحدة منها.

1. Static 
2. relative 
3. absolute 
4. fixed

  قيمة Static :
هذه القيمة التي تأخدها خاصية الـposition تعني أن العنصر الذي سيتم إضافتها اليه سوف يكون ثابت في مكانه ولن يتم تحريكه حتى وإن أضفت اليه خصائص الـLeft و Right و Top و Bottom يعني أنها لاتؤثر فيها حتى و إن وضعتها.

مثال حي للمعاينة : 



  قيمة Relative :
 قيمة relative أو 'النسبي'، يقوم بتحديد مكان العنصر نسبة الى العناصر الاخرى،   فهو تابع دائما للقيمة السابقة ومتناسب مع أقرب العناصر له و عكس القيمة السابقة فهو يمكن أن يؤثر بـإحداثيات التموضع (يمين،يسار،فوق،تحت).

مثال حي للمعاينة :




  قيمة Absolute :
هذه القيمة تعتبر الوضع الحر للعنصر يعني أنه لا يتأثر بقيم  و خصائص العناصر الأخرى، يعني أن هذه القيمة تجعل العنصر مستقل و حر في الموقع، ويتغيير على حسب الشاشة. العنصر كما قلنا أنه لا يتاثر بالعناصر الأخرى. 

مثال حي للمعاينة :




  قيمة Fixed
هذه القيمة شبيهة نوعا ما بالقيمة السابقة بحيث أن العنصر يظهر فوق جميع العناصر الاخرى و لايتأثر بخصائصها، لكن قيمة "ثابت" يعني أن العنصر سيظهر فوق جميع العناصر مهما كانت قيمتها و أيضا سيظر دائما في الصفحة حتى و إن قمت بتمريرها، هذه القيمة تستعمل كثيراً في القوائم.


مثال حي للمعاينة :





⇚ خلاصة الموضوع :
خاصية الـposition  من أهم الخصائص التي على كل مبرمج أو مصمم مواقع أن يتقنها و يعرف كيفية العمل بها، خصوصا أن أصبح استعمالها بكثرة في المواقع الحديثة، وهناك قيم أخرى تمت إضافتها حديثا لكن لم يتم التعريف عليها رسميا من طرف جميع المتصفات، فهناك بعض المتصفحات التي لاتدعمها و في بعض الأحيان تقع مشاكل إن لم يدعمها. و في الاخير أتمنى أنك فهمت الدرس جيداً، لاتنسى لايك و مشاركة الموضوع حتى نقدم لكم الأفضل إن شاء الله.

هناك تعليق واحد:

صفحة نجمة الرسمية

قناة نجمة الرسمية

الأكثر تصفحا

جميع الدورات

{"type":"footer-slider","label":"جميع الدورات","posts_number":"12"}

نجمة :

أحيانًا، عليكَ أن تلقِ نظرة على ماضيك، وتبتسم برضا على ما وصلت إليه