خاصية Position
آخر تحديث: 2026-09-13
position خاصية Position
تحدد خاصية position كيفية تموضع العنصر، سواء بقي في تدفق المستند أو أُزاح بالنسبة لنقطة مرجعية ما. وبالاقتران مع خصائص top وright وbottom وleft، تُتاح أنماط التموضع النسبي والفوري والثابت واللاصق لتأثيرات تخطيط شائعة.
| الفئة | |
|---|---|
| القيمة الأولية | static |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
position: static | relative | absolute | fixed | sticky;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
static | relative | absolute | fixed | sticky | كلمة مفتاحية | نوع التموضع: static/relative/absolute/fixed/sticky. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُتموضع العنصر absolute بالنسبة لأقرب سلف له غير static، لذا عادةً ما تحتاج إلى إعطاء الأب position:relative كمرجع للتموضع.
تحذير： يُتموضع العنصر fixed بالنسبة لإطار العرض؛ وتختلف المتصفحات المحمولة في الدعم، مما قد يسبب اهتزازًا أو تموضعًا خاطئًا في بعض الحالات.
❓ الأسئلة الشائعة
Qما الفرق بين absolute وrelative؟
Aيظل العنصر relative في تدفق المستند، لذا تُزاحه وسائط مثل top وleft من موضعه الأصلي مع الحفاظ على مساحته الأصلية. أما العنصر absolute فهو خارج التدفق ولا يشغل مساحة ويُتموضع بالنسبة لأقرب سلف متموضع غير static؛ فإن لم يوجد فيكون بالنسبة لإطار العرض. قاعدة تذكّر: relative يحرّك العنصر ويحتفظ بمكانه؛ وabsolute يغادر التدفق ويرتبط بسلف.
Qكيف يختلفان sticky وfixed؟
Aيتموضع fixed دائمًا بالنسبة لإطار العرض ويبقى ثابتًا أثناء التمرير، خارج التدفق. أما sticky فيجمع relative وfixed: قبل تجاوز حد التمرير يتصرف مثل relative ويتحرك مع المحتوى؛ وبعد الحد يلتصق مثل fixed، لكن فقط ضمن حدود الأب. ويتطلب sticky حدًا مثل top، ولا يجب أن يكون للأب overflow:hidden.
Qبالنسبة لِمَ يُتموضع position:absolute؟
Aيُتموضع العنصر absolute بالنسبة لصندوق padding لأقرب سلف متموضع له، أي عنصر لا يكون position فيه static. فإن كان كل الأسلاف static، فيرجع إلى الكتلة الحاوية الأولية التي عادةً ما تكون إطار العرض. ولذلك فالنمط الشائع هو إعطاء الأب position:relative كسياق للتموضع، بحيث تُحسب إزاحات الأبناء absolute بالنسبة لحاوية الأب.
Qلماذا لا يعمل position:sticky؟
Aالأسباب الشائعة: أولًا، حاوية الأب ليست عالية بما يكفي فلا يوجد مجال للتمرير؛ ثانيًا، يضبط الأب أو سلف overflow:hidden أو auto أو scroll فيكسر sticky؛ ثالثًا، لم يُضبط حد مثل top أو bottom؛ رابعًا، العنصر داخل حاوية لا يمكنها التمرير. افحص هذه واحدًا تلو الآخر مع الانتباه خصوصًا إلى overflow في الأسلاف.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
top / right / bottom / left
خصائص الإزاحة المستخدمة مع position.
z-index (ترتيب التراكب)
التحكم في ترتيب التراكب للعناصر المتموضعة.
