الفرق بين Position Absolute و Position Relative في CSS
الفرق الأساسي بين position: absolute و position: relative يكمن في كيفية تحديد موقع العنصر على الصفحة وتأثيره على تدفق العناصر الأخرى.
Position Relative
عند استخدام position: relative، يبقى العنصر في موقعه الطبيعي داخل تدفق الصفحة ولكنه يصبح قابلًا للتحريك بالنسبة لموقعه الأصلي. أي أنك إذا قمت بتحريك العنصر باستخدام الخاصيات top، bottom، left أو right، فإن Element يتحرك بالنسبة لموقعه الأصلي، لكن يحتفظ بمساحته الأصلية في التصميم. هذا يعني أن العناصر المحيطة به لا تتأثر بشكل كبير وستتصرف كما لو أن العنصر لم يتحرك.
مثال على ذلك:
العنصر يتحرك 10 بيكسل للأسفل ولكن يحتفظ بمساحته الأصلية
Position Absolute
عندما تستخدم position: absolute، يتم إخراج العنصر تمامًا من التدفق الطبيعي للصفحة. هذا يعني أن Element لا يحتل أي مساحة في المكان الذي كان فيه أصلاً، ويمكن تحريكه بحرية بناءً على أقرب عنصر أبوي (Parent) لديه خاصية position غير static (أي relative أو absolute أو fixed). إذا لم يوجد عنصر أبوي بهذه الخاصية فإن العنصر المطلق سيتم تحديد موقعه بناءً على نافذة المتصفح.
باستخدام top، left، right، و bottom يمكنك وضع العنصر المطلق في أي مكان تريده داخل العنصر الأب أو نافذة العرض، لكن العنصر لن يؤثر في وضع العناصر الأخرى ولن تتأثر تلك العناصر به.
متى تستخدم كل منهما؟
يُستخدم position: relative عندما تريد إبقاء العنصر في مكانه ولكن تحتاج لتحريكه قليلاً بدون التأثير على العناصر الأخرى في الصفحة. كما يُستخدم كمحدد (reference) لمواقع العناصر الأبناء عند استخدام position: absolute.
أما position: absolute، فهو مثالي عندما تريد وضع عنصر في مكان معين مستقل عن التدفق الطبيعي للصفحة، مثل القوائم المنسدلة، النوافذ المنبثقة، أو أي عنصر يحتاج إلى التراكب فوق العناصر الأخرى.
مثال عملي
لنفترض أن لديك عنصر أب (Container) وضعته position: relative، وداخل هذا العنصر لديك طفل (Child) بـ position: absolute، عندئذٍ سيتم تحريك الطفل بالنسبة للعنصر الأب وليس بالنسبة للنافذة. هذا يسمح لك بالتحكم في مكان الطفل دون التأثير على باقي الصفحة.
أما إذا استخدمت position: absolute للطفل بدون ضبط العنصر الأب، فسيتم تحريك الطفل بناءً على نافذة المتصفح، مما قد يسبب تداخلًا مع محتويات الصفحة الأخرى.
