شرح Position في CSS — كيف تتحكم في مكان العناصر بدقة احترافية؟

خاصية position في CSS من أقوى الخصائص للتحكم في مكان العنصر. بها تستطيع تحريك العنصر بدقة، تثبيته على الشاشة، أو جعله يلتصق أثناء التمرير.

إذا كنت تبحث عن شرح position في CSS أو الفرق بين relative و absolute أو متى أستخدم fixed و sticky، فهذا الدرس يشرحها بوضوح عملي.

ما هي position في CSS؟

خاصية position تحدد طريقة تموضع العنصر داخل الصفحة. القيم الأساسية هي:

• static (الافتراضي)
• relative
• absolute
• fixed
• sticky

التعريف البسيط: position في CSS تحدد كيف وأين يظهر العنصر بالنسبة لنفسه أو لأبيه أو للشاشة.

1) static في CSS

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

.box {
    position: static;
    top: 20px; /* لن يُحدث فرقاً واضحاً */
}

2) relative في CSS

العنصر يبقى في مكانه الأصلي، لكن يمكنك تحريكه نسبةً إلى هذا المكان.

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

ماذا يفعل هذا الكود؟ يحرك العنصر 10px للأسفل و20px لليمين من موقعه الطبيعي.

النتيجة المتوقعة: العنصر يتحرك بصرياً، لكن مكانه الأصلي يظل محجوزاً.

خطأ شائع: توقع أن العناصر الأخرى ستتحرك لملء الفراغ (غالباً لا).

3) absolute في CSS

العنصر يخرج من التدفق الطبيعي ويتم تموضعه نسبةً إلى أقرب أب مموضع (relative أو absolute أو fixed أو sticky).

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

ماذا يفعل هذا الكود؟ يثبت الابن في أعلى يمين الأب.

النتيجة المتوقعة: تموضع دقيق داخل الحاوية.

خطأ شائع: نسيان position: relative للأب، فيتموضع الابن نسبةً للصفحة.

4) fixed في CSS

العنصر يتموضع نسبةً إلى نافذة المتصفح ويظل ثابتاً أثناء التمرير.

.help-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

ماذا يفعل هذا الكود؟ يثبت زر المساعدة أسفل يمين الشاشة دائماً.

النتيجة المتوقعة: العنصر يبقى مرئياً حتى مع scroll.

خطأ شائع: استخدام fixed لعناصر كثيرة فيسبب إزعاجاً للمستخدم.

5) sticky في CSS

sticky مزيج بين relative وfixed: يتحرك بشكل طبيعي ثم يثبت عند نقطة معينة.

.section-title {
    position: sticky;
    top: 0;
    background: white;
}

ماذا يفعل هذا الكود؟ يجعل العنوان يلتصق أعلى الشاشة عند الوصول إليه أثناء التمرير.

النتيجة المتوقعة: تجربة قراءة أفضل في الأقسام الطويلة.

خطأ شائع: نسيان top مع sticky، فيبدو وكأنه لا يعمل.

top / right / bottom / left في CSS

هذه الخصائص تحدد مسافة الإزاحة، لكنها تعمل فقط عندما تكون position غير static.

.box {
    position: absolute;
    top: 20px;
    right: 50px;
}

z-index في CSS (ترتيب الطبقات)

عندما تتداخل العناصر، z-index يحدد من يظهر فوق الآخر. القيمة الأكبر تكون في الأعلى.

.a { z-index: 1; }
.b { z-index: 2; }

ماذا يفعل هذا الكود؟ العنصر .b يظهر فوق .a إذا تداخلا.

خطأ شائع: استخدام z-index بدون position مفعّل للعنصر.

أخطاء شائعة في Position in CSS

١) absolute بدون parent relative: التموضع يصبح نسبة للصفحة بدل الحاوية.

٢) sticky لا يعمل: غالباً بسبب غياب top أو قيود overflow في الأب.

٣) z-index لا يعمل: لأن position لم تُضبط أو بسبب stacking context.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين relative و absolute في CSS؟

relative يحرك العنصر نسبةً لمكانه الأصلي، absolute يخرجه من التدفق ويتموضع نسبةً لأقرب أب مموضع.

متى أستخدم fixed في CSS؟

لعناصر ثابتة مثل زر الدعم أو شريط علوي ثابت.

لماذا position: sticky لا تعمل في CSS؟

تأكد من وجود top وأن الأب لا يمنع السلوك عبر overflow غير مناسب.

كيف أجعل عنصر فوق عنصر آخر في CSS؟

استخدم z-index مع عنصر مموضع (position غير static).

هل top/right تعمل مع position: static؟

لا، تحتاج position غير static.