من أكثر الأمور التي تصعب على مبرمج واجهات المواقع هي أماكن وترتيب العناصر المدرجة في الصفحة والتحكم بها للوصول الى النتيجة والمظهر المرجو.
ولكن في الحقيقة إن فهم خاصية position والأنواع التي تندرج تحتها (static, relative, absolute, fixed, sticky) والتفريق بينها بشكل جوهري وعميق ومعرفة الأثر التي تتركه كل منها على العنصر يزيل تلك الصعوبة ويخففها.
وقبل الولوج إلى صلب الموضوع لا بد لك أن تتصور كل عنصر مضاف بواسطة لغة HTML مستطيل له ارتفاع وعرض، يتم حجز مكان له بناءاً على ارتفاعه وعرضه الذي يتشكل حسب محتواه، ويمكن التحكم بمكان هذا المستطيل الذي يمتلك مساحة من خلال مجموعة خواص بلغة CSS، والصحيح بأن خاصية position بأنواعها جميعها عند إضافتها لوحدها لا تحدث تغيرًا أو أثرًا، فهي بالأصح تمكين لاستخدام مجموعة خواص، أي أن كل نوع يتيح لك التحكم بمكان العنصر بطريقة وأسلوب معين بالإضافة إلى أنه يترك أثر عند تغير مكانه على العنصر نفسه وعلى العناصر المجاورة، وهذا ما سنتعرف هنا.
والسؤال الذي يطرح نفسه ، إن لم نقوم بإسناد أحد أنواع هذه الخاصية هل سيكون العنصر مختفيًا لأنه لا يملك مكان أو ستندرج العناصر المضافة فوق بعضها أو بشكل عشوائي غير منظم؟
محتوي المقال
{position: static}
إن لم نقوم بإسناد أحد أنواع خاصية position فإن العناصر المدرجة تترتب وتصطف بشكل منظم وافتراضي ومرن مقترن بالمساحة التي يشغلها كل عنصر دون تداخل أو تناقض، وهذا ما يمثل مفهوم النوع.
static بالضبط ، حيث يتم تطبيقه على العناصر المدرجة تلقائيًا والأصل أن لا نحتاج لإضافته، ولكن بحالات شاذة يتغير مكان العنصر التلقائي والمفترض بشكل غير مرغوب وذلك بسبب تأثره بخصائص عناصر أخرى ، وفي هذه الحالة نجبره على العودة واتخاذ مكانه الأصلي والمفترض من خلال إسناد هذه الخاصية إليه، وهي حالة غير اعتيادية.
ولكن كيف لنا أن نقوم بتغيير مكان العنصر ليتخذ المكان الذي نريد ؟
{position: relative}
الصحيح أنه يمكننا تغيير مكان العناصر والتحكم بها بعدة طرق مثل الخواص (top, bottom, left, right) التي يمكننا من خلالها إزاحة العنصر للأعلى أو للأسفل ولليمين أو اليسار، ولكن لتمكين استخدامها يمكننا إسناد خاصية position من النوع relative ، ولكن بإضافة هذه الخاصية يوجد تبعات أخرى يجب مراعاتها والانتباه إليها حتى لا نتسبب بسوء استخدام وحتى نحصل على النتيجة التي نريد وهي:
- عند إسناد هذا النوع فإننا نحصل على مستطيلين للعنصر(مكانين) أحدهما هو الأصلي والمفترض ويبقى فارغًا والأصل ألا يشغله عنصر جديد(يحافظ على مكانه الأصلي ولا يخسره)والآخر هو المكان الذي حددناه له.
- بإسناد هذا النوع يتم تقييد وتحديد مساحة وأماكن العناصر التي تدرج داخل هذا العنصر ولا يمكن أن تخرج عن حدود هذا المستطيل ويتم التحكم بمكانها ومساحتها بالنسبة لهذا العنصر.
- عند تغير أماكن العناصر قد يعتلي عنصر فوق أخر وفي هذه الحالة قد نحتاج لإبراز عنصر وإخفاء الآخر، لذا فإن النوع relative يمكننا من استخدام الخاصية z-index والتحكم بترتيب العناصر فوق بعضها.
هل يمكن أن نغير أماكن العناصر دون التقيّد بهذه التبعات وبإمكانية أقوى؟
{position: absolute}
هذا النوع أيضًا يمكننا من استخدام الخواص (top, bottom, left, right) ولكن بإمكانية قوية حيث بإمكاننا تغيير مكان العنصر إلى إي مكان نريد حسب العنصر الذي يحتويه (إذا كان العنصر الكبير مقيد بخاصية relative فإننا لا نستطيع تغيير أماكن العناصر الصغيرة الموجودة داخله الى خارج حدوده وان كانت تملك النوع absolute) وإن لم يتواجد العنصر داخل آخر فيمكن تحريكه والتحكم بمكانه بالنسبة لكامل الصفحة. ولإستخدام هذه الخاصية تبعات يجب مراعاتها أيضًا وهي:
- فقدان المكان الأصلي المفترض للعنصر كليًا وامتلاكه المكان الجديد بمساحته وحدوده فقط
- نستطيع أن نحصل على أي ترتيب نريده وقد يختلف اختلافًا كليًا عن الترتيب الإفتراضي ، وهذا قد يتسبب باختفاء كلي لعناصر لا تملك نوع absolute.
- ومن أكثر الأمور التي يجب مراعاتها أن العنصر الذي يمتلك هذا النوع يتعامل كأنه لوحده في الصفحة لا يتأثر أبداً بمكان ومساحة غيره ولا يؤثر كذلك في غيره (إلا في حال كان تابع لعنصر يمتلك نوع relative فإنه يكون محدود بمساحة هذا العنصر الأكبر)
وبناءً على ما يترك absolute من أثر على العنصر يجب الحذر عند استخدامه وتجنب الإفراط في ذلك، فكلما كان استخدامه أكثر قلت المرونة في مراعاة المساحات والأماكن للعناصر كما ذكرنا في خصائص الترتيب الإفتراضي.
هل من الممكن أن نظهر تنبيه للمستخدم على شكل نافذة ظاهرة لا تختفي ولا تتغير مكانها مع تمكين المستخدم تمرير الشاشة إلى الأسفل أو الأعلى أو حتى تثبيت أسم الموقع أو شريط الأدوات أو حتى ذيل الموقع وظهورها دائمًا للمستخدم بنفس المكان من شاشة العرض؟
{position: fixed}
جميع الأنواع السابقة كانت تعطي تحكمًا بمكان العنصر بالنسبة لكامل الصفحة وهذا يعني عند تمرير الصفحة للأعلى أو الأسفل يسبب ارتفاع جميع العناصر المتواجدة أو نزولها كما هو المعتاد، ولكن قد نرغب بثبات عنصر وعرضه بالنسبة للنافذة الظاهرة للمستخدم وليس بالنسبة لكامل الصفحة كما هو معتاد عليه، وهنا يكمن دور هذا النوع.
ولكن يجب الحذر باستخدام هذا النوع ، فقد يتسبب بحجب عناصر أو جزء منها ولا يمكن الوصول لها وقد يختلف ذلك من جهاز إلى آخر حسب حجم الشاشة لذا يُفضل ترك مساحات فارغة في الأماكن التي قد يحدث فيها الحجب (مثل نهاية الصفحة مع وجود ذيل من نوع fixed)، ويستلزم أيضًا الفحص الدقيق والجيد مع مراعاة اختلاف أحجام الشاشات.
هل من الممكن أن نقوم بوضع عنصر بمكانه المفترض ثم عند تمرير الشاشة يتخذ مكاناً جديدًا؟ كصندوق بحث موجود بالشريط أعلى الصفحة وعند انتقالنا بالشاشة يخرج عن مكانه الأصلي إلى مكان ثابت من الشاشة ويلتصق فيه ليظهر للمستخدم دائماً بجميع أجزاء الصفحة.
{position: sticky}
وهذا النوع يتيح لك مكانين للعنصر، الأول وهو الأصلي ويكون العنصر موجودًا فيه والثاني ينتقل إليه بمجرد وصوله إليه ويلتصق به ، أي يكون بحالة static ثم يصبح بحالة fixed ، وطريقة تطبيق ذلك هي فقط بإسناد الخاصية position من النوع sticky ثم نسند معها خواص المكان الثاني الذي سينتقل إليه العنصر عند تمرير الشاشة.
يجب الانتباه إلى أن العنصر الذي يكون تابع لعنصر أكبر منه وهذا العنصر الكبير لا يملك غير هذا العنصر الصغير فإنه لا يمكن إسناد هذا النوع sticky للعنصر الصغير ولن يعمل معه.
يمكننا أن نطبق هذا النوع بالعكس أي يتخذ العنصر المكان الثاني ثم يستقر بمكانه الأصلي ، مثل أن نعطي هذا النوع لعنصر في ذيل الصفحة (كشعار الشركة) فيبقى ظاهرًا للمستخدم وعند تمرير الشاشة إلى نهاية الصفحة حيث الذيل يوجد فإن هذا العنصر يستقر بمكانه الأصلي.
