شرح Position في CSS: الفرق بين Relative و Absolute و Fixed و Sticky

1- absolute

-تساعد بالتحكم في العنصر بشكل مرن في داخل الصفحة, عند اعطاء العنصر هذه الخاصية يقوم بعمل طبقة فوق العناصر الأخرى و يتحرك فيها

– يتحرك بالنسبة لحدود الصفحة

– لا يقوم بحجز مكانه الأساسي, اذا قمت باضافة عنصر, هذا العنصر المضاف يأتي مكانه(مكان العنصر الذي معه خاصية postion: absolute)

2-fixed

-كل ما تم ذكره سابقا ينطبق على position:fixed, الفرق هو أنه عند عمل scroll للصفحة يبقى العنصر ثابت

في بعض الحالات، يتم تحويل width تلقائيًا إلى fit-content، لذلك يمكن تغييره يدويًا إلى width: 100% مثلاً للحفاظ على التناسق.

3-relative

-يقوم بالحفاظ على المكان الذي كان بحجزه عكس fixed و absolute

-لا يتحرك بالنسبة للصفحة ككل، بل يتحرك بناءً على موقعه الأصلي 

-postion: absolute تحب ال postion: relative كيف!؟

-عند اعطاء ال parent خاصية postion: relative و ال child خاصية postion: absolute هيك بصير يتحرك بالنسبة لحدود الأب

4-sticky

مزيج بين relative و fixed.

في البداية يكون العنصر عاديًا (مثل relative) لكنه عند التمرير (scroll) يصل إلى نقطة معينة فيبقى ثابتًا في مكانه (مثل fixed).

لا يخرج من تدفق الصفحة، لذا يحتفظ بمكانه.

لا تؤثر على width مثل fixed غالبًا