خاصية Top
آخر تحديث: 2026-09-13
top خاصية Top
تُعرّف الخاصية top إزاحة العنصر الموضوع من الحافة العلوية لكتلة الاحتواء الخاصة به. لا تُطبَّق إلا على العناصر التي يكون موضعها (position) relative أو absolute أو fixed أو sticky، وتُستخدم للتحكم بدقة في الموضع الرأسي للعنصر.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | العناصر الموضوعة |
| نوع الحركة | length |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
top: auto | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | بدون إزاحة. |
<length> | <percentage> | النوع | قيمة إزاحة نسبة إلى كتلة الاحتواء. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| top | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： يتأثر بـ top العناصر الموضوعة فقط (غير static)؛ لا يؤثر تعيينه على عنصر position:static.
تلميح： تُحسب النسبة المئوية بالنسبة لارتفاع كتلة الاحتواء؛ أمّا auto فتترك للمتصفح حل الموضع من الخصائص الأخرى.
❓ الأسئلة الشائعة
Qماذا يحدث عند تعيين top و bottom معًا؟
Aالأمر يختلف. بالنسبة للعناصر absolute أو fixed التي لا تحدد ارتفاعًا، يتمدد العنصر لملء المسافة بين top و bottom، فيصبح ارتفاعه متكيفًا. مع الموضع relative، يُغلِب top ويُتجاهل bottom. وإذا تُم تحديد ارتفاع أيضًا، يُغلِب top ويُتجاهل bottom. يُستخدم هذا السلوك غالبًا لتمديد العناصر عموديًا داخل عنصر أب، مثل طبقات الخلفية بملء الارتفاع.
Qما الذي تُنسب إليه النسبة المئوية في top؟
Aتُحسب النسبة المئوية بالنسبة لارتفاع كتلة الاحتواء. بالنسبة للعناصر absolute فكتلة الاحتواء هي الصندوق الداخلي (padding box) لأقرب سلف موضوع؛ وبالنسبة لـ fixed فهي إطار العرض (viewport)؛ وبالنسبة لـ relative فهي موضع العنصر الأصلي نفسه. لذلك فإن top:50% يضع الحافة العلوية للعنصر عند نصف ارتفاع كتلة الاحتواء، وغالبًا يُقرن بـ transform:translateY(-50%) للتوسيط الرأسي، إذ ينقله التحويل نصف ارتفاعه هو.
Qلماذا لا يعمل top؟
Aالسبب الأكثر شيوعًا هو أن العنصر غير موضوع: لا يعمل top إلا على العناصر التي موضعها relative أو absolute أو fixed أو sticky، ويُتجاهل تمامًا عندما يكون static وهو الافتراضي. وتحقق أيضًا من أن القيمة صالحة، أي auto أو طول أو نسبة مئوية، وأنها غير مُستبَّلة بخصائص مثل height. أكّد موضع (position) أولًا، ثم تحقق من حساب الإزاحة.
Qكيف أُوسّط عموديًا باستخدام top:50%؟
Aاضبط العنصر على position:absolute، مع جعل الأب position:relative، واستخدم top:50% ليكون الحافة العلوية عند منتصف الحاوية، ثم طبّق transform:translateY(-50%) لترفع العنصر بمقدار نصف ارتفاعه هو. هذه هي التوسيط الرأسي. لاحظ أن التحويل ينقل العنصر 50% من ارتفاعه هو، وهو ما يختلف عن طريقة حساب نسبة top، والاثنان معًا ضروريان لتوسيط حقيقي بغض النظر عن حجم المحتوى.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية position
تعرّف على الشروط المسبقة لكي يسري top.
bottom (الإزاحة السفلية)
الخاصية التي تُزاح من الحافة السفلية.
