خاصية right
آخر تحديث: 2026-09-13
right خاصية right
تحدد خاصية right إزاحة عنصر موضعي من الحافة اليمنى لكتلته المحتوية، وتُقاس إلى اليسار. تُطبَّق فقط على العناصر الموضعية غير الساكنة، وتُستخدم عادةً مع التموضع absolute أو fixed لمحاذاة العناصر إلى اليمين.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
right: auto | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | بدون إزاحة. |
<length> | <percentage> | النوع | إزاحة من الحافة اليمنى للكتلة المحتوية. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| right | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： تؤثر right فقط على العناصر الموضعية غير الساكنة؛ ولا تأثير لها على position:static.
تلميح： تُحسب النسبة المئوية بالنسبة إلى عرض الكتلة المحتوية. تعيين left و right معًا يمدّ عرض العنصر لملء المسافة بينهما.
❓ الأسئلة الشائعة
Qماذا يحدث عند تعيين left و right معًا؟
Aبالنسبة للعناصر absolute أو fixed بدون عرض، يتمدد العنصر لملء المسافة بين left و right، مما يُنشئ تخطيطًا بعرض متكيّف؛ على سبيل المثال، .bar { position:absolute; left:0; right:0; } يمتد على كامل المساحة الأفقية. إذا تم تعيين عرض، يفوز left ويُتجاهل right في النصوص LTR. هذا نمط مفيد للطبقات العلوية والشريطية بكامل العرض.
Qأيهما له الأولوية الأعلى: right أم left؟
Aيعتمد الأمر على اتجاه الكتابة. في LTR، أي النص من اليسار إلى اليمين مثل الإنجليزية والصينية، يأخذ left الأولوية ويُتجاهل right عند تعيين كلاهما؛ وفي RTL، النص من اليمين إلى اليسار مثل العربية، يأخذ right الأولوية. أيضًا، إذا لم يُعيَّن عرض، يعمل كلاهما معًا لتمديد العنصر. تجعل هذه القاعدة التخطيطات تتبع اتجاه الكتابة، لكنها سلوك حساس للاتجاه يجب الانتباه إليه.
Qلماذا لا يعمل right؟
Aالأسباب الشائعة: أولًا، أن position للعنصر ثابت (static)، نظرًا لأن right تؤثر فقط على العناصر الموضعية؛ ثانيًا، تم تعيين كل من عرض و left، ويفوز left في LTR، مما يجعل right غير فعال؛ ثالثًا، سوء فهم المرجع، لأن absolute يتموضع بالنسبة للحافة اليمنى لأقرب سلف موضعي، بينما يتموضع fixed بالنسبة للحافة اليمنى لإطار العرض. تحقق أولًا من position والخصائص المتعارضة، وأكّد اتجاه الإزاحة.
Qكيف أثبّت عنصرًا على الجانب الأيمن من حاوية؟
Aأعطِ الأب position:relative والابن position:absolute; right:0، اختياريًا مع top أو bottom للموضع الرأسي، فيلتصق الابن بالحافة اليمنى للأب. ولتثبيته على يمين إطار العرض، استخدم position:fixed; right:20px; top:20px مباشرةً، وهو أمر شائع لأزرار العودة إلى الأعلى وأدوات الدردشة العائمة. أضف z-index عند تداخل عدة طبقات عائمة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
left (الإزاحة اليسرى)
الخاصية التي تُزاح من الحافة اليسرى.
خاصية position
تعرّف على المتطلبات الأساسية لكي يسري مفعول right.
