CSS: تموضع CSS
آخر تحديث: 2026-10-13
التموضع CSS هو أداة تخطيط قوية تتيح لك التحكم الدقيق في موضع العناصر على الصفحة.
مرجع سريع لخاصية position
| القيمة | السلوك | نقطة المرجع | الاستخدام الشائع |
|---|---|---|---|
static |
تدفق عادي (افتراضي) | — | السلوك الافتراضي |
relative |
إزاحة من الموضع العادي | الموضع الأصلي للعنصر | ضبط دقيق، سياق تموضع |
absolute |
مُزال من التدفق | أقرب أصل مُتموضع | شارات، تراكبات |
fixed |
ثابت في منفذ العرض | منفذ العرض | تروسيات ثابتة، زر العودة للأعلى |
sticky |
هجين | حاوية تمرير + منفذ العرض | تروسيات ثابتة |
1. position: relative
يزاح العنصر من موضعه العادي، بدون إزالته من تدفق المستند:
▶ مثال
▶ جرّب الكوداستخدامات شائعة:
- ضبط دقيق لموضع العنصر
- إنشاء سياق تموضع للأبناء absolutely
2. position: absolute
يُزال العنصر من التدفق، موضعه نسبي لأقرب أصل مُتموضع:
▶ مثال
▶ جرّب الكودنقطة مفتاحية: إذا لم يكن هناك أصل مُتموضع، absolute يوضع نسبياً لمنفذ العرض.
3. position: fixed
ثابت في منفذ العرض، لا يتحرك مع الصفحة:
▶ مثال
▶ جرّب الكوداستخدامات شائعة:
- أشرطة تنقل
- أزرار العودة للأعلى
- أدوات دردشة
4. position: sticky
هجين من relative و fixed — يتحرك بشكل عادي ثم "يلتصق" عند عتبة:
▶ مثال
▶ جرّب الكودملاحظات الاستخدام:
- يتطلب قيمة
topأوbottomأوleftأوrightللعمل - عنصر الأصل لا يمكن أن يحتوي على
overflow: hiddenأوoverflow: auto - ارتفاع الأصل يجب أن يكون أكبر من ارتفاع العنصر اللاصق
5. z-index (ترتيب التكديس)
عندما تتراكب العناصر، z-index يتحكم في أيها يظهر في الأعلى:
▶ مثال
▶ جرّب الكودملاحظة: z-index يعمل فقط على العناصر المُتموضعة (ليست static).
(1) سياق التكديس
z-index يُقارن داخل نفس "سياق التكديس". كل عنصر مُتموضع يُنشئ سياق تكديس — z-index الأبناء يُقارن فقط داخل سياق الأصل.
❓ أسئلة شائعة
س ماذا يُستخدم لـ position: relative؟
ج يُستخدم بشكل شائع كمرجع تموضع للأبناء absolutely. أضف
position: relative إلى أصل (without إزاحة)، وابناء position: absolute ستموضع نسبياً لذلك الأصل. without relative على الأصل، absolutely تتموضع نسبياً للصفحة بأكملها.س تموضع fixed لا يعمل جيداً على المحمول؟
ج fixed يتصرف بشكل غير متسق في Safari المحمول، خاصة مع لوحات المفاتيح المنبثقة أو تمرير الصفحة. استخدم
position: sticky كبديل لبعض السيناريوهات، أو استخدم JavaScript لكشف المحمول والتعامل معه بشكل خاص.س z-index مُعيَّن عالٍ لكن لا يزال محجوباً؟
ج z-index يعمل فقط داخل نفس سياق التكديس. إذا كان للأصل z-index، z-index الأبناء يُقارن فقط داخل سياق ذلك الأصل — لن يتجاوز حدود الأصل. تحقق إذا كان الأصل يحتوي على z-index أقل، أو إذا كان الأصل يحتوي على خصائص مثل
opacity تُنشئ سياقات تكديس جديدة.📖 ملخص
- تموضع CSS هو أداة تخطيط قوية
relativeللضبط الدقيق وسياق التموضعabsoluteيُوضع بدقة الأبناء داخل الأصولfixedللعناصر الثابتة في منفذ العرض (تنقل، زر العودة للأعلى)stickyلسيناريوهات "اللصق في الموضع"- أتقن التموضع مع تكديس z-index لتلبية أي احتياج تخطيط
📝 تمارين
- أنشئ "بطاقة منتج" بشارة "HOT" في الزاوية العلوية اليمنى باستخدام
position: absolute. - أنشئ شريط تنقل سفلي ثابت أو إشعار حقوق النشر باستخدام
position: fixed. - أنشئ "ترويسة لاصقة" — عناوين أقسام تلتصق في الأعلى عند التمرير حتى يدفعها العنوان التالي.
- نفّذ توسيط absolute لعنصر أصل (باستخدام absolute + top/left + transform).
