تموضع CSS

التموضع CSS هو أداة تخطيط قوية تتيح لك التحكم الدقيق في موضع العناصر على الصفحة.

مرجع سريع لخاصية position

position: relative

يزاح العنصر من موضعه العادي، بدون إزالته من تدفق المستند:

مثال

<style>
.box {
  position: relative;
  top: 20px;    /* يتحرك للأسفل 20px */
  left: 30px;   /* يتحرك لليمين 30px */
  background: #e3f2fd;
  padding: 10px;
}
</style>
<div class="box">موضع نسبي (مُزاح من الموضع الأصلي)</div>
<p>هذه الفقرة تبقى في التدفق العادي — الصندوق لا يزال يشغل مساحته الأصلية.</p>

استخدامات شائعة:

• ضبط دقيق لموضع العنصر
• إنشاء سياق تموضع للأبناء absolutely

position: absolute

يُزال العنصر من التدفق، موضعه نسبي لأقرب أصل مُتموضع:

مثال

<style>
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px solid #333;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e74c3c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
<div class="parent">
  <div class="badge">HOT</div>
  <p>محتوى بطاقة المنتج</p>
</div>

نقطة مفتاحية: إذا لم يكن هناك أصل مُتموضع، absolute يوضع نسبياً لمنفذ العرض.

position: fixed

ثابت في منفذ العرض، لا يتحرك مع الصفحة:

مثال

<style>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: white;
  padding: 10px 20px;
  z-index: 1000;
}
</style>
<div class="fixed-header">ترويسة ثابتة — دائماً مرئية في الأعلى</div>

استخدامات شائعة:

• أشرطة تنقل
• أزرار العودة للأعلى
• أدوات دردشة

position: sticky

هجين من relative و fixed — يتحرك بشكل عادي ثم "يلتصق" عند عتبة:

مثال

<style>
.sticky-nav {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
  padding: 10px;
  z-index: 100;
}
</style>
<div class="sticky-nav">تنقل لاصق — يتحرك مع المحتوى، ثم يلتصق في الأعلى</div>

ملاحظات الاستخدام:

• يتطلب قيمة top أو bottom أو left أو right للعمل
• عنصر الأصل لا يمكن أن يحتوي على overflow: hidden أو overflow: auto
• ارتفاع الأصل يجب أن يكون أكبر من ارتفاع العنصر اللاصق

z-index (ترتيب التكديس)

عندما تتراكب العناصر، z-index يتحكم في أيها يظهر في الأعلى:

مثال

<style>
.box1 {
  position: absolute;
  z-index: 10;
  background: #e74c3c;
  width: 100px;
  height: 100px;
}
.box2 {
  position: absolute;
  z-index: 5;
  background: #3498db;
  width: 100px;
  height: 100px;
  left: 30px;
  top: 30px;
}
</style>
<div class="box1">z-index: 10 (في الأعلى)</div>
<div class="box2">z-index: 5 (خلف)</div>

ملاحظة: z-index يعمل فقط على العناصر المُتموضعة (ليست static).

سياق التكديس

z-index يُقارن داخل نفس "سياق التكديس". كل عنصر مُتموضع يُنشئ سياق تكديس — z-index الأبناء يُقارن فقط داخل سياق الأصل.

❓ أسئلة شائعة

📖 ملخص

• تموضع CSS هو أداة تخطيط قوية
• relative للضبط الدقيق وسياق التموضع
• absolute يُوضع بدقة الأبناء داخل الأصول
• fixed للعناصر الثابتة في منفذ العرض (تنقل، زر العودة للأعلى)
• sticky لسيناريوهات "اللصق في الموضع"
• أتقن التموضع مع تكديس z-index لتلبية أي احتياج تخطيط

📝 تمارين

1. أنشئ "بطاقة منتج" بشارة "HOT" في الزاوية العلوية اليمنى باستخدام position: absolute.
2. أنشئ شريط تنقل سفلي ثابت أو إشعار حقوق النشر باستخدام position: fixed.
3. أنشئ "ترويسة لاصقة" — عناوين أقسام تلتصق في الأعلى عند التمرير حتى يدفعها العنوان التالي.
4. نفّذ توسيط absolute لعنصر أصل (باستخدام absolute + top/left + transform).