الدليل الشامل لشرح الفرق بين Position:Static, Relative, Absolute, Fixed في CSS

[mennad sofiane]

هي قاعدة Position في CSS وكيفية عملها سهل علي الكثير عند محاولة تصميم صفحة ويب.

وعدم الدراية السليمة بالفرق بين Position:Static, Relative, Absolute, Fixed سيسبب لك الكثير من المتاعب والتخبط عند تصميم موقعك، ولكن سنوضح عنها الكثير.

فقاعدة Position في CSS إن كنت تعرف أم لا فهي قاعدة لتحديد موقع العنصر في الصفحة، عن طريق التلاعب بإحداثيات العنصر في الصفحة Top, Right, Bottom and Left. وفي الحقيقة معظم عناصر الصفحة يجب أن تتبع التدفق الطبيعي للصفحة/الوثيقة Document،أي يتصرف كل عنصر بالشكل الذي صمم لأجله. ولكن يأتي دور Position عندم تريد عمل شيء أكثر تقدماً مثل الأنيميشن أو دفع عنصر خارج الإطار الطبيعي له دون التأثير على العناصر المحيطة مثلاً.

ومما لا شك فيه أن هنا خصائص افتراضية لعناصر الصفحة. فمثلاً div فإن القيمة الإفتراضية للقاعدة display

كذلك فإن القيمة الإفتراضية للقاعدة position لجميع العناصر هي static، وهي قيمة من ضمن مجموعة من القيم، حيث سنتحدث في السطور التالية عنها كل على حده وهي:

• Static
• Absolute
• Relative
• Fixed
• Inherit
• Sticky

الخاصية Static

وهي الوضع الإفتراضي لعناصر الصفحة/الوثيقة حيث تأخذ طريقة العرض والأسلوب والتأثير الإفترضي على العناصر المحيطة التي يُفترض أن تأخذه أثناء سريان بناء الوثيقة Document Flow.

فإذا قمت بعمل اثنين div والذي يأخذ طريقة العرض block وموقعه الإفتراضي Static فمن الطبيعي أن يقع كل منهما أسفل الآخر وهذا هو السريان الطبيعي للوثيقة

هي block بشكل افتراضي على عكس span التي هي inline.

الخاصية Relative

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

قد تسبب لك الخاصية Relative بعض الحيرة  لأن هذه الخاصية في الحقيقة تعني أن العنصر “نسبي إلى نفسه أو بمعنى آخر إلى الموقع المفترض أن يوجد به”، وفي الحقيقة إن لم تقم بتغير قيم Top, Right, Bottom and Left  سيكون تأثيرها مثل تأثير static ولكن على عكس Static يمكن تطبيق جميع الخصائص دون مشكلة.

عند التحكم في قيم Top, Right, Bottom and Left يتم ترحيل العنصر عن موقعه دون أن يؤثر على العناصر المحيطة، على عكس تطبيق Margin والتي تدفع العناصر المحيطة بما يساوي قيمة الهامش Margin.

الخاصية Absolute

هي الأخرى تجبر العنصر على الخروج من التدفق الطبيعي للوثيقة ولكن على عكس Relative ليس له تأثير على العناصر التي تتبع التدفق الطبيعي للوثيقة ويأخذ موقعه المطلق (تتعامل معه عناصر الوثيقة كما لو كان غير موجوداً بها). والموقع المطلق Absolute في الحقيقة يتوقف على عدة عوامل:

• إذا قمت بتحديد الخاصية position:absolute فقط دون تحديد الإحداثيات (Top, Right, Bottom and Left) فإن القيمة الإفتراضية للإحداثيات تكون auto، وهذا يعني أن العنصر سيكون في الموقع الذي هو مفترض أن يكون به أثناء وجوده داخل التدفق الطبيعي للوثيقة.
• إذا قمت بتحديد الخاصية position:absolute مع تحديد أي من الإحداثيات (Top, Right, Bottom and Left) فسيحدث أحد أمرين:
  • سيتم تحديد موقع العنصر المطلق بالنسبة لأول أب موقعه ليس static
  • إذا لم يتم العثور على أب أو جد إلى أخر الترتيب الشجري يأخذ موقع غير static سيتم تحديد العنصر بالنسبة للوثيقة/الصفحة

لنفرض مثلاً أن لديك إثنين div داخل بعضهما وأنت لم تقم بتغيير الـ Position، أي في الوضع الإفتراضي، فإن الوضع الطبيعي أن يكونا فوق بعضهما. ثم قمت بتغيير الموقع للـ div الداخلي (الإبن) إلى Absolute، ماذا تتوقع أن يحدث؟

إليك هذا السيناريو:

• هل تم تحديد الإحداثيات؟
• إن كان لا يكون العنصر بالنسبة لموقعه الإفتراضي
• إن كان نعم؟
• سيقوم الـ div الإبن بفحص الـ Position للـ div الأب
• فإن كان موقعه هو الإفتراضي Static (هذا ما افترضناه)
• فيقوم بتخطيه والنظر لما بعده وهكذا إلى أن يجد أحد الآباء يأخذ موقع غير static، فيقوم باتخاذه نقطة بداية.
• إن لم يجد نهائياً فيقوم بالضبط نسبة للوثيقة نفسها.

الآن سنقوم بتجربة ضبط وضع الـ div الداخلي إلى absolute دون تغيير الأب أو تحديد إحداثيات، ولكن سنقوم بعمل هامش علوي للأب حتى نفرق بينه وبين الوثيقة