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