خصائص top CSS
- الصفحة السابقة text-underline-position
- الصفحة التالية transform
التعريف والاستخدام
تحدد الخاصية top حافة العليا للعنصر. تعرف هذه الخاصية على التكيف بين الحافة العليا للحدود الخارجية للعنصر المحدد والمحور العليا للكتلة المضيفة.
التعليق:إذا كانت قيمة الخاصية position هي "static"، فإن تعيين الخاصية top لن ينتج أي تأثير.
الشرح
للمعلمات الثابتة، تكون تلقائي؛ للقيم الطولية، تكون الطول المطلق المناسب؛ للقيم المئوية، تكون القيمة المحددة؛ وإلا تكون تلقائي.
للمعلمات المحددة بشكل مطلق، إذا كانت top وbottom كلاهما تلقائي، فإن القيم المحسوبة ستكون 0؛ إذا كان أحد الكلين تلقائي، فإن القيمة الأخرى ستكون عكس القيمة الأخرى؛ إذا لم تكن كلاهما تلقائي، فإن bottom ستأخذ القيمة العكسية لتصريح top.
انظر أيضًا:
دليل CSSتثبيت CSS
دليل HTML DOMخصوصية top
مثال
ضع حافة العلوية للصورة في 5 بكسل تحت حافة العلوية للعنصر المضيف:
img
{
position:absolute;
top:5px;
}
قواعد اللغة CSS
top: auto|طول|الافتراضي|توريث;
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| تلقائي | القيمة الافتراضية. يتم حساب موقع الحافة العلوية من قبل المتصفح. |
| % | ضبط موقع العنصر العلوية بناءً على النسبة المئوية للعنصر. يمكن استخدام القيم السلبية. |
| طول | استخدام وحدات مثل px،cm إلخ لضبط موقع العنصر العلوية. يمكن استخدام القيم السلبية. |
| توريث | يحدد هذا الخصوصية أن القيمة يجب أن تورث من عنصر الأب الخاصية top. |
تفاصيل التقنية
| القيمة الافتراضية: | تلقائي |
|---|---|
| الوراثة: | لا |
| الإصدار: | CSS2 |
| قواعد اللغة الجافا سكريبت: | object.style.top="50px" |
مزيد من الأمثلة
- استخدام القيمة الثابتة لضبط حافة العلوية للصورة
- هذا المثال يوضح كيفية استخدام القيمة الثابتة لضبط حافة العلوية للصورة.
- استخدام النسبة المئوية لضبط حافة العلوية للصورة
- هذا المثال يوضح كيفية استخدام النسبة المئوية لضبط حافة العلوية للصورة.
دعم المتصفح
الرقم في الجدول يوضح الإصدار الأول من المتصفح الذي يدعم الخاصية بالكامل.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- الصفحة السابقة text-underline-position
- الصفحة التالية transform
