عرض مصدر CSS/top

<noinclude>{{DISPLAYTITLE:الخاصية <code>top</code>}}</noinclude>
الخاصية <code>top</code> في CSS تساهم في تحديد الموضع الرأسي لأحد العناصر التي يمكن أن يتغير مكانها (positioned elements)، وليس لهذه الخاصية تأثير في العناصر التي لا يمكن أن يتغير مكانها (non-positioned elements).<syntaxhighlight lang="css">
/* <length> قيم */
top: 3px;
top: 2.4em;

/* <percentages> قيم نسبية */
/* تؤخذ نسبةً إلى ارتفاع الكتلة الحاوية للعنصر */
top: 10%;

/* كلمة محجوزة */
top: auto;

/* القيم العامة */
top: inherit;
top: initial;
top: unset;
</syntaxhighlight>تأثير الخاصية <code>top</code> يعتمد على قيمة الخاصية <code>[[CSS/position|position]]</code>:
* عندما تُضبَط الخاصية <code>[[CSS/position|position]]</code> إلى القيمة <code>absolute</code> أو <code>fixed</code>، فستُحدِّد الخاصية <code>top</code> المسافة بين الحافة العلوية للعنصر وبين الحافة العلوية للكتلة الحاوية له (containing block).
* عندما تُضبَط الخاصية <code>[[CSS/position|position]]</code> إلى <code>relative</code>، فستُحدِّد الخاصية <code>top</code> المسافة التي ستنتقل وفقها الحافة العلوية للعنصر فوق مكانها الطبيعي.
* عندما تُضبَط الخاصية <code>[[CSS/position|position]]</code> إلى <code>sticky</code>، فستعمل الخاصية <code>top</code> كما لو أنَّ موضع العنصر <code>relative</code> عندما يكون ظاهرًا ضمن إطار العرض (viewport)، وستعمل كما لو أنَّه <code>fixed</code> عندما لا يكون ظاهرًا ضمن إطار العرض.
* عندما تُضبَط الخاصية <code>position</code> إلى <code>static</code> (أي أنَّ العنصر لا يمكن أن يغيّر مكانه)، فلن يكون للخاصية <code>top</code> أيّ تأثير.
عند تحديد قيم للخاصيتين <code>top</code> و <code>[[CSS/bottom|bottom]]</code>، وكانت قيمة الخاصية <code>[[CSS/height|height]]</code> غير مُحدِّدة أو كانت <code>auto</code> أو <code>100%</code>، فستُحتَرم القيم المسندة للخاصيتين <code>top</code> و <code>[[CSS/bottom|bottom]]</code>؛ وفي حال استعملت قيمة الخاصية <code>[[CSS/height|height]]</code>، فالأولوية للخاصية <code>top</code> وستُهمَل الخاصية <code>[[CSS/bottom|bottom]]</code>. 
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto</code>
|-
! scope="row" |تُطبَّق على
|العناصر التي يمكن أن يتغير مكانها (positioned elements).
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

|}
==أمثلة==
يبيّن هذا المثال استخدام الكلمة المحجوزة <code>auto</code> مع عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> موضعه مطلق (absolute):<syntaxhighlight lang="html">
<div class="parent">
    <span>parent container</span>
    <div class="actual">Actual position</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}

.actual {
  position: absolute;
  top: auto;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}
</syntaxhighlight>مثال عن استخدم قيمة طولية <code>[[CSS/length|<length>]]</code> مع تحديد موضع العنصر إلى نسبي <code>relative</code> عبر الخاصية <code>[[CSS/position|position]]</code>، لاحظ كيف سيتحرّك العنصر إلى الأسفل نسبةً إلى موضعه الأصلي:<syntaxhighlight lang="css">
.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
}

.actual {
  position: relative;
  top: 20px;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}
</syntaxhighlight>أما هذا المثال، فهو عن استخدام الخاصية <code>top</code> مع عنصر موضعه مطلق:<syntaxhighlight lang="css">
.parent {
  background-color: #f8f9fa;
  padding: 1em;
  height: 150px;
  position: relative;
}

.actual {
  position: absolute;
  top: 0;

  background-color: #310736;
  color: white;
  box-sizing: border-box;
  width: 250px;
  height: 2em;
  padding: 0.25em;
  text-align: center;
  opacity: 0.9;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|5
|6
|1.0
|}

== البنية العامة ==
=== القيمة <code>[[CSS/length|<length>]]</code> ===
قيمة طولية <code>[[CSS/length|<length>]]</code> سالبة أو موجبة تمثِّل:
* المسافة بين الحافة العلوية للعنصر وبين الحافة العلوية للكتلة الحاوية له (containing block)؛ وذلك إذا كان موضع العنصر مطلقًا (absolutely positioned)
* المسافة التي ستنتقل وفقها الحافة العلوية للعنصر فوق مكانها الطبيعي؛ وذلك إذا كان موضع العنصر نسبيًا (relatively positioned).

=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
نسبة مئوية من ارتفاع الكتلة الحاوية على العنصر.

=== القيمة <code>auto</code> ===
* إذا كان موضع العنصر مطلقًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية <code>bottom</code>.
* إذا كان موضع العنصر نسبيًا، فهذه القيمة ستؤدي إلى تحديد موضع العنصر اعتمادًا على قيمة الخاصية <code>[[CSS/bottom|bottom]]</code> انطلاقًا من موضع العنصر الابتدائي، وإذا كانت قيمة الخاصية <code>[[CSS/bottom|bottom]]</code> تساوي <code>auto</code> أيضًا، فلن يتحرك العنصر رأسيًا. 

=== البنية الرسمية ===
<syntaxhighlight lang="css">
top: <length> | <percentage> | auto;
</syntaxhighlight>
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة ‎[http://www.w3.org/TR/CSS2/visuren.html#propdef-top CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Positioning]]