خاصية position في CSS: دليل شامل لفهم تموضع العناصر مع أمثلة عملية
Aldawsari 
لإتقان لغة CSS وبناء واجهات مستخدم احترافية، لا بد من فهم أساسياتها وخصائصها المختلفة وقيمها المتعددة. في هذا المقال، سنغوص في أعماق خاصية position في CSS، وهي إحدى الخصائص المحورية التي تمنحك تحكمًا كاملاً في تموضع العناصر داخل صفحة الويب. سنتعرف على القيم المختلفة التي يمكن أن تأخذها هذه الخاصية وكيفية عمل كل منها من خلال أمثلة عملية وواضحة.
ما هي خاصية position في CSS؟
تُحدد خاصية position كيفية تموضع العنصر في المستند. تعمل هذه الخاصية جنبًا إلى جنب مع خصائص التموضع الأخرى مثل left، right، top، bottom، و z-index لتحديد الموضع النهائي للعنصر على الصفحة. هناك خمس قيم أساسية يمكن أن تأخذها خاصية position:
staticrelativeabsolutefixedsticky
دعنا نستكشف كل قيمة من هذه القيم بالتفصيل ونفهم الفروقات الجوهرية بينها.
position: static: التموضع الافتراضي
تُعد قيمة static هي القيمة الافتراضية لجميع العناصر في CSS. عند استخدام هذه القيمة، يتم تموضع العنصر وفقًا للتدفق الطبيعي للمستند (normal flow). والأهم من ذلك، فإن خصائص التموضع مثل left، right، top، bottom، و z-index لا تؤثر على العنصر الذي يحمل position: static.
مثال عملي على position: static
لنوضح كيف أن position: static لا يؤثر على تموضع العنصر، سنستخدم مثالاً بسيطًا يتكون من ثلاثة عناصر div موضوعة داخل حاوية رئيسية (parent container). سنعتمد على هذا الهيكل في جميع الأمثلة اللاحقة في هذا المقال.
< html >
< body >
< div class = "parent-element" >
< div class = "sibling-element" > أنا العنصر الشقيق الآخر. </ div >
< div class = "main-element" > كل الأنظار عليّ. أنا العنصر الرئيسي. </ div >
< div class = "sibling-element" > أنا العنصر الشقيق الآخر. </ div >
</ div >
</ body >
< html >
الآن، لنقم بإضافة position: static إلى العنصر div الذي يحمل الفئة main-element، ونضيف له قيمتي left و bottom. كما سنضيف بعض التنسيقات للعناصر الأخرى لتمييزها عن العنصر الرئيسي.
.main-element {
position : static;
left : 10px ;
bottom : 10px ;
background-color : yellow;
padding : 10px ;
}
.sibling-element {
padding : 10px ;
background-color : #f2f2f2 ;
}
ستلاحظ أنه لا يوجد أي تغيير في موضع العنصر الرئيسي. هذا يؤكد أن خاصيتي left و bottom لا تؤثران على عنصر يحمل position: static. لننتقل إلى القيمة التالية.
position: relative: التموضع النسبي
العناصر التي تحمل position: relative تبقى ضمن التدفق الطبيعي للمستند. ولكن، على عكس العناصر ذات التموضع static، فإن خصائص left، right، top، bottom، و z-index تؤثر على موضع العنصر. يتم تطبيق إزاحة (offset) على العنصر بناءً على قيم هذه الخصائص، وتكون هذه الإزاحة نسبية إلى الموضع الأصلي للعنصر نفسه.
مثال عملي على position: relative
لنقم باستبدال position: static بـ position: relative في مثالنا السابق.
.main-element {
position : relative;
left : 10px ;
bottom : 10px ;
background-color : yellow;
padding : 10px ;
}
الآن، ستلاحظ أن خاصيتي left و bottom تؤثران على موضع العنصر الرئيسي. الأهم هو أن العنصر لا يزال ضمن التدفق الطبيعي للمستند، وأن الإزاحة المطبقة هي نسبة إلى موقعه الأصلي. تذكر هذه النقطة جيدًا ونحن ننتقل إلى القيم الأخرى.
position: absolute: التموضع المطلق
العناصر التي تحمل position: absolute يتم تموضعها بشكل نسبي لأقرب عنصر أب (parent element) مُحدد موضعًا (positioned ancestor). في هذه الحالة، يتم إزالة العنصر من التدفق الطبيعي للمستند تمامًا، وتتصرف العناصر الأخرى كما لو أن هذا العنصر غير موجود في المستند. لا يتم حجز أي مساحة للعنصر في تخطيط الصفحة.
تحدد قيم left، top، bottom، و right الموضع النهائي للعنصر. من المهم ملاحظة أن العنصر ذو position: absolute يتم تموضعه بالنسبة لأقرب عنصر أب له يمتلك قيمة position مختلفة عن static. إذا لم يكن أقرب عنصر أب مُحدد موضعًا، فسيتم تموضعه بالنسبة للعنصر الأب التالي الذي يمتلك خاصية position (غير static). وإذا لم يكن هناك أي عنصر أب مُحدد موضعًا، فسيتم تموضعه بالنسبة لعنصر <html>.
مثال عملي على position: absolute
لنعد إلى مثالنا. في هذه الحالة، سنغير position للعنصر الرئيسي إلى position: absolute. وسنعطي العنصر الأب (parent element) تموضعًا نسبيًا (position: relative) لضمان أن يتم تموضع العنصر الرئيسي بالنسبة له، وليس بالنسبة لعنصر <html>.
.main-element {
position : absolute;
left : 10px ;
bottom : 10px ;
background-color : yellow;
padding : 10px ;
}
.parent-element {
position : relative;
height : 100px ;
padding : 10px ;
background-color : #81adc8 ;
}
.sibling-element {
background : #f2f2f2 ;
padding : 10px ;
border : 1px solid #81adc8 ;
}
لاحظ في النتيجة أن العنصر الرئيسي لم يعد يشغل مساحة في التدفق الطبيعي للمستند، وتم تموضعه الآن بالنسبة للعنصر الأب. هذه نقطة حاسمة يجب تذكرها.
position: fixed: التموضع الثابت
العناصر ذات position: fixed تشبه العناصر ذات التموضع المطلق (absolute) من حيث أنها تُزال أيضًا من التدفق الطبيعي للمستند. ولكن على عكس العناصر المطلقة، يتم تموضعها دائمًا بالنسبة لإطار العرض (viewport) أو عنصر <html>. الميزة الأبرز للعناصر الثابتة هي أنها لا تتأثر بالتمرير (scrolling)؛ فهي تبقى دائمًا في نفس الموضع على الشاشة، بغض النظر عن مدى تمرير المستخدم للصفحة.
مثال عملي على position: fixed
.main-element {
position : fixed;
bottom : 10px ;
left : 10px ;
background-color : yellow;
padding : 10px ;
}
html {
height : 800px ; /* لإتاحة التمرير */
}
في هذا المثال، يتم تموضع العنصر الرئيسي بالنسبة لعنصر <html> (أي إطار العرض). حاول التمرير في الصفحة وستلاحظ أن العنصر يظل ثابتًا في مكانه على الشاشة. هذه الخاصية مثالية لأشرطة التنقل الثابتة أو أزرار العودة للأعلى.
position: sticky: التموضع اللزج
تُعد position: sticky مزيجًا ذكيًا بين position: relative و position: fixed. يتصرف العنصر الذي يحمل هذه الخاصية كعنصر نسبي (relative) حتى يصل إلى نقطة تمرير معينة (scroll point)، وبعدها يتصرف كعنصر ثابت (fixed). هذه الخاصية مفيدة جدًا لإنشاء رؤوس جداول ثابتة أو أشرطة جانبية تلتصق بالشاشة عند التمرير.
مثال عملي على position: sticky
.main-element {
position : sticky;
top : 10px ;
background-color : yellow;
padding : 10px ;
}
.parent-element {
position : relative;
height : 800px ; /* لإتاحة التمرير */
padding : 50px 10px ;
background-color : #81adc8 ;
}
عند التمرير في نافذة النتيجة، ستلاحظ أن العنصر يتصرف كعنصر نسبي في البداية. وعندما يصل إلى نقطة معينة على الشاشة (في هذه الحالة، عندما يصبح top: 10px من إطار العرض)، فإنه يلتصق هناك تمامًا كعنصر ثابت. هذه الخاصية توفر تجربة مستخدم ديناميكية ومحسّنة بشكل كبير.
الخلاصة التقنية
لقد كانت رحلة شيقة في عالم خاصية position في CSS. إن فهم هذه الخاصية وقيمها المتعددة (static، relative، absolute، fixed، و sticky) يُعد حجر الزاوية في إتقان تموضع العناصر وتصميم تخطيطات صفحات الويب المعقدة والديناميكية. كل قيمة تقدم حلاً فريدًا لمشكلة تموضع معينة، ومعرفة متى وكيف تستخدم كل منها سيمكنك من بناء واجهات مستخدم مرنة وجذابة. لا تتردد في التجربة والتطبيق العملي لهذه الخصائص في مشاريعك الخاصة، فالممارسة المستمرة هي مفتاح الإتقان في عالم CSS.