طريقة استخدام السمة top CSS و أمثلة

يحدد السمة top الحافة العلوية للعنصر. يحدد هذا السمة الحد الأعلى للنسيج الخارجي للعنصر المحدد بالتصحيح مع الحد الأعلى للكتلة المضمونة.

بالنسبة إلى العناصر المحددة بشكل نسبي، إذا كانت القمة والأسفل كلاهما auto، فإن القيمة الحسابية لكلاهما ستكون 0؛ إذا كان واحد منهما auto، فإنه يأخذ القيمة المضادة للآخر؛ إذا لم يكن كلاهما auto، فإن الأسفل سيأخذ القيمة المضادة للقمة.

ملاحظة: إذا كان قيمة الخاصية position هي "static"، فإن تعيين الخاصية top لن يؤدي إلى أي تأثير.

• بالنسبة لالتركيب المطلقالعنصر، يحدد الخاصية top حجم الانحراف للحافة العلوية للصندوق الخاص به بالنسبة للحافة العلوية للصندوق المضممن.

• بالنسبة لالتركيب النسبيالعنصر، يحدد الخاصية top حجم الانحراف الخاص بالحافة العلوية للصندوق الخاص به بالنسبة للحافة العلوية للصندوق (بمعنى آخر، يتم تحديد موقع الصندوق في التدفق الطبيعي، ثم يتم الانحراف بناءً على هذه الخاصيات من هذا الموقع).

جدول أدناه يوضح تعليمات الاستخدام وتاريخ الإصدار لهذه الخاصية، بالإضافة إلى استخدام الخاصية في سكريبتات JavaScript.

قواعد النحو لاستخدام top

قواعد النحو لهذه الخاصية هي:

top:　length　|　percentage　|　auto　|　initial　|　inherit

المثال أدناه يوضح كيفية استخدام الخاصية top.

　　p　{
　　　position:　absolute;
　　　top:　150px;
　　}

قيمة الخاصية

جدول أدناه يصف قيمة هذه الخاصية.

تطابق المتصفح

تطابق متصفح top الخاص بالخصائص، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم الخاصية؛ جميع المتصفحات الشائعة يدعمون الخاصية.

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:موقع CSS،CSS طبقات。

خصائص مرتبطة:position،left،right،bottom،z-index。