خاصية left
آخر تحديث: 2026-09-13
left خاصية left
تحدد خاصية left إزاحة عنصر موضعي من الحافة اليسرى لكتلته المحتوية، وتُقاس إلى اليمين. تُطبَّق فقط على العناصر الموضعية غير الساكنة، وهي من خصائص الإزاحة الأكثر استخدامًا، وتُقرن عادةً بالتموضع absolute أو fixed لتموضع دقيق على اليسار.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
left: auto | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | بدون إزاحة. |
<length> | <percentage> | النوع | إزاحة من الحافة اليسرى للكتلة المحتوية. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| left | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： تؤثر left فقط على العناصر الموضعية غير الساكنة؛ ولا تأثير لها على position:static.
تلميح： تُحسب النسبة المئوية بالنسبة إلى عرض الكتلة المحتوية. تعيين left و right معًا يمدّ عرض العنصر لتخطيطات متكيّفة.
❓ الأسئلة الشائعة
Qماذا يحدث عند تعيين left و right معًا؟
Aبالنسبة للعناصر absolute أو fixed بدون عرض، يتمدد العنصر من اليسار إلى اليمين، مما يملأ المساحة الأفقية بشكل متكيّف؛ على سبيل المثال، .overlay { position:absolute; left:0; right:0; } يمتد بكامل العرض. إذا تم تعيين عرض، يفوز left ويُتجاهل right في النصوص LTR. هذا نمط معتاد للأشرطة بكامل العرض وطبقات التراكب، مما يسمح للعنصر بإعادة التحجيم مع إطار العرض تلقائيًا.
Qبماذا تُحسب النسبة المئوية لـ left؟
Aتُحسب النسبة المئوية بالنسبة إلى عرض الكتلة المحتوية. بالنسبة لعناصر absolute، تكون الكتلة المحتوية هي صندوق padding لأقرب سلف موضعي؛ ولفfixed، هي إطار العرض؛ ولـ relative، هي موضع العنصر الأصلي نفسه. على سبيل المثال، يضع left:50% الحافة اليسرى للعنصر عند نصف عرض الكتلة المحتوية، ويُدمج غالبًا مع transform:translateX(-50%) للتوسيط الأفقي.
Qكيف أوسّط أفقيًا باستخدام left:50%؟
Aعيّن العنصر كـ position:absolute، مع جعل الأب position:relative، واستخدم left:50% ليقع الحافة اليسرى عند منتصف الحاوية، ثم طبّق transform:translateX(-50%) لإزاحته إلى اليسار بمقدار نصف عرضه؛ هذه هي الحيلة الكلاسيكية للتوسيط الأفقي. بديل عصري أنظف هو الأب المرن باستخدام display:flex; justify-content:center، الذي يتجنب الأرقام السحرية تمامًا. ونفس حيلة translateX تعمل مع right:50% للتوسيط من الحافة اليمنى.
Qلماذا لا يعمل left؟
Aالسبب الأكثر شيوعًا هو أن position لا يزال ثابتًا (static)، نظرًا لأن left يعمل فقط على العناصر الموضعية. بعد ذلك، إذا تم تعيين كل من width و right، يفوز left على right في النصوص LTR؛ فإذا كنت تتوقع تطبيق right، أزل left أو width. أخيرًا، تأكد من أن القيمة صالحة، أي auto أو طول أو نسبة مئوية. تحقق من position والخصائص المتعارضة خطوة بخطوة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
right (الإزاحة اليمنى)
الخاصية التي تُزاح من الحافة اليمنى.
خاصية position
تعرّف على المتطلبات الأساسية لكي يسري مفعول left.
