خاصية position في لغة CSS تُستخدم لتحديد طريقة تموضع عنصر HTML على الصفحة. تُعتبر هذه الخاصية من أهم الخواص 
في CSS، حيث تُمكنك من التحكم الدقيق في مكان العناصر وتداخلها. لها خمس قيم رئيسية:

  • static (القيمة الافتراضية): هذا هو الوضع الافتراضي لجميع العناصر. في هذا الوضع، يتدفق العنصر في الصفحة بشكل طبيعي، أي من الأعلى إلى الأسفل ومن اليسار إلى اليمين (أو من اليمين إلى اليسار في اللغات التي تُكتب من اليمين). لا تتأثر العناصر في هذا الوضع بالخصائص التالية: top، bottom، left، و right.

  • relative (موضع نسبي): في هذا الوضع، يحتفظ العنصر بمكانه الأصلي في تدفق الصفحة، ولكن يُمكنك تحريكه باستخدام الخصائص top، bottom، left، و right. يتم تحريك العنصر بالنسبة لموقعه الأصلي. بمعنى آخر، إذا قمت بتحريك عنصر بمقدار top: 20px;، فسيتحرك 20 بكسل أسفل موقعه الأصلي. لا يؤثر هذا التحريك على أماكن العناصر الأخرى في الصفحة.

  • absolute (موضع مُطلق): في هذا الوضع، تتم إزالة العنصر تمامًا من تدفق الصفحة، ولا يشغل أي مساحة. يتم تموضع العنصر بالنسبة لأقرب عنصر أب له يمتلك قيمة position غير static (عادةً ما يكون relative، absolute، fixed، أو sticky). إذا لم يكن هناك أي عنصر أب بهذه الخاصية، فسيتم تموضع العنصر بالنسبة للنافذة (window). يُمكنك استخدام الخصائص top، bottom، left، و right لتحديد موقعه بدقة.

  • fixed (موضع ثابت): في هذا الوضع، تتم إزالة العنصر من تدفق الصفحة ويثبت في مكان مُحدد بالنسبة للنافذة. يبقى العنصر ثابتًا حتى عند التمرير (scroll) في الصفحة. يُمكنك استخدام الخصائص top، bottom، left، و right لتحديد موقعه. غالبًا ما يُستخدم هذا الوضع لإنشاء أشرطة تنقل ثابتة أو عناصر أخرى يجب أن تظل مرئية دائمًا.

  • sticky (موضع لزج): هذا الوضع يُعتبر مزيجًا من relative و fixed. في البداية، يتصرف العنصر مثل relative، ولكن عندما يصل التمرير إلى نقطة مُعينة (تُحدد باستخدام top، bottom، left، أو right)، يتحول إلى fixed ويثبت في مكانه. يُستخدم هذا الوضع غالبًا لإنشاء رؤوس أقسام تلتصق بأعلى الشاشة عند التمرير.

  • همك لخاصية position وكيفية استخدام قيمها المختلفة سيُساعدك بشكل كبير في تصميم مواقع الويب وتحديد أماكن العناصر بدقة. تذكر دائمًا العلاقة بين العناصر الأبناء والعناصر الآباء عند استخدام position: absolute;.