🎯 التحكم الكامل في المواقع: دليل شامل لخاصية Position في CSS

مرحباً بك مجدداً في رحلتك مع CSS! 🚀 حتى الآن، تعلمت كيفية تنسيق العناصر وتغيير ألوانها وأحجامها. لكن ماذا لو أردت وضع صورة فوق نص معين، أو تثبيت شريط التنقل في أعلى الصفحة حتى أثناء التمرير؟ هنا يأتي دور خاصية Position، وهي إحدى أقوى الأدوات في صندوق أدوات المطور لترتيب العناصر على الصفحة بدقة متناهية.

في هذا الدرس، سنتعرف على القيم الخمس الأساسية لـ position وكيفية استخدام كل منها لتحقيق التخطيط الذي تريده.

📌 ما هي خاصية Position في CSS؟

ببساطة، خاصية position تحدد الطريقة التي يتم بها وضع وتحديد موقع عنصر HTML على الصفحة. هي التي تتحكم في "سياق التنسيق" للعنصر، أي من أين يبدأ العد لتحديد موقعه.

القيمة الافتراضية لأي عنصر هي static، وهذا يعني أن العنصر يتبع التدفق الطبيعي للصفحة (من أعلى لأسفل، ومن اليسار لليمين)، ولا يمكنك تحريكه باستخدام خصائص مثل top أو left.

/* هذا هو السلوك الطبيعي، حتى لو لم تكتبه */
.element {
  position: static;
}

🧱 القيمة الأولى: position: relative (النسبية)

عندما تعطي لعنصر position: relative، فإنك تقول له: "ابق في مكانك الأصلي في التدفق الطبيعي، لكن اسمح لي بتحريكك قليلاً نسبياً من هذا الموقع".

كيف نستخدمها؟ بعد تعيين position: relative، يمكنك استخدام الخصائص التالية لتحريك العنصر:

  • top: للتحريك من الأعلى.
  • bottom: للتحريك من الأسفل.
  • left: للتحريك من اليسار.
  • right: للتحريك من اليمين.

مثال عملي: لنفترض أن لدينا صندوقاً ونريد تحريكه 20 بكسل لأسفل و 30 بكسل لليمين من موقعه الأصلي.

<div class="box">أنا صندوق نسبي</div>

.box {
  position: relative; /* 👈 العنصر أصبح نسبياً */
  top: 20px;   /* تحريك 20px للأسفل من موقعه الأصلي */
  left: 30px;  /* تحريك 30px لليمين من موقعه الأصلي */
  background-color: lightblue;
  padding: 20px;
  width: 200px;
}

💡 ملاحظة مهمة: المساحة الأصلية التي كان يشغلها العنصر في التدفق الطبيعي تظل محجوزة ولا يملأها عناصر أخرى.

🎯 القيمة الثانية: position: absolute (المطلقة)

هنا تبدأ الأمور بالتشويق! position: absolute تخرج العنصر كلياً من التدفق الطبيعي للصفحة. لن يحجز أي مساحة، وستتحرك العناصر الأخرى لتحل محله كما لو لم يكن موجوداً أصلاً.

المفتاح: يبحث العنصر المطلق (absolute) عن أقرب عنصر أب (parent) لديه position بقيمة غير static (مثل relative, absolute, fixed). ويتم وضع العنصر بالنسبة لهذا الأب. إذا لم يجد، فسيتم وضعه بالنسبة لجسم الصفحة (<body>).

مثال عملي: نريد وضع شعار داخل زاوية صندوق معين.

<div class="container">
  <div class="logo">شعار</div>
  محتوى الصندوق هنا...
</div>

.container {
  position: relative; /* 👈 هذا ضروري! يجعل الصندوق نقطة مرجعية للعنصر المطلق بداخله */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  padding: 20px;
}

.logo {
  position: absolute; /* 👈 العنصر أصبح مطلقاً */
  top: 10px;   /* 10px من حافة الصندوق العلوية */
  right: 10px; /* 10px من حافة الصندوق اليمنى */
  background-color: darkblue;
  color: white;
  padding: 5px 10px;
}

📍 القيمة الثالثة: position: fixed (الثابتة)

هل لاحظت شريط التنقل الذي يبقى في أعلى الصفحة حتى عندما تقوم بالتمرير لأسفل؟ هذا هو position: fixed! 🎉

العنصر ذو position: fixed يُخرج أيضاً من التدفق الطبيعي، ولكنه يُثبت بالنسبة لإطار العرض (Viewport) – أي الجزء المرئي من الشاشة. بغض النظر عن التمرير، سيظل العنصر ثابتاً في مكانه.

مثال عملي: إنشاء زر "العودة للأعلى" ثابت في أسفل الزاوية.

.back-to-top {
  position: fixed; /* 👈 العنصر أصبح ثابتاً */
  bottom: 20px;    /* 20px من أسفل الشاشة */
  right: 20px;     /* 20px من يمين الشاشة */
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
}

🧲 القيمة الرابعة: position: sticky (اللاصقة)

هذه القيمة هي مزيج رائع بين relative و fixed. العنصر يتصرف كـ relative في البداية ويتبع التدفق الطبيعي، ولكن بمجرد وصولك لمكان معين أثناء التمرير (محدد بخصائص مثل top)، يلتصق (fixed) في مكانه حتى نهاية العنصر الحاوي له.

مثال عملي: عناوين الأقسام في قائمة طويلة تلتصق بأعلى الصفحة عند التمرير.

.section-title {
  position: sticky; /* 👈 العنصر أصبح لاصقاً */
  top: 0;           /* 👈 الشرط: عندما يصل العنوان لحافة أعلى الشاشة (0px)، يلتصق */
  background-color: white;
  padding: 10px;
  border-bottom: 2px solid #333;
}

📝 ملخص سريع: مقارنة بين قيم Position

القيمة المرجع (يتم الوضع بالنسبة لـ) هل يخرج من التدفق الطبيعي؟ الاستخدام الشائع
static التدفق الطبيعي للصفحة ❌ لا القيمة الافتراضية.
relative موقعه الأصلي نفسه ❌ لا تحريك عنصر قليلاً من مكانه مع إبقاء مساحته محجوزة.
absolute أقرب أب له position غير static ✅ نعم وضع عنصر داخل عنصر آخر (مثل أيقونة داخل زر).
fixed إطار العرض (الشاشة) ✅ نعم تثبيت عناصر مثل شريط التنقل أو زر الاتصال.
sticky التمرير داخل العنصر الحاوي ⚠️ (يبدأ relative ثم يصبح fixed) عناوين الجداول الطويلة أو قوائم التصنيفات.