files/fa/web/css/top/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

---
title: بالا
slug: Web/CSS/top
tags:
  - top
  - بالا
translation_of: Web/CSS/top
---
<div dir="rtl">{{CSSRef}}</div>

<h2 dir="rtl" id="Summary" name="Summary">خلاصه مطلب</h2>

<p dir="rtl">ویژگی CSS <code>top</code> قسمتی از موقعیت عناصر موقعیت داده شده (positioned elements) را مشخص می‌کند. این ویژگی تاثیری بر عناصری که موقعیت داده نشده اند (non-positioned)، ندارد.</p>

<p dir="rtl">برای عناصری که موقعیت مستقل دارند (آنهایی که همراه {{Cssxref("position")}}: <code>absolute</code> یا {{Cssxref("position")}}: <code>fixed</code> هستند)، فاصله‌ی بین ضلع بالای حاشیه از عنصر و ضلع بالای بلوک شامل خودش را مشخص می‌کند.</p>

<p dir="rtl">برای عناصری که موقعیت نسبی دارند (آنهایی که همراه {{Cssxref("position")}}: <code>relative</code> هستند)، اندازه‌ی حرکتی که عنصر به زیر موقعیت عادی خود دارد مشخص می‌کند.</p>

<p dir="rtl">وقتی هر دو ویژگی {{Cssxref("top")}} و {{Cssxref("bottom")}} تعیین شده باشند، موقعیت عنصر بیش از حد محدود هست و ویژگی {{Cssxref("top")}} اولویت دارد: مقدار محاسبه شده‌ی {{Cssxref("bottom")}} روی -{{Cssxref("top")}} قرار می گیرد، درحالی که مقدار خودش که تعیین گردیده نادیده گرفته می‌شود.</p>

<p dir="rtl">{{cssinfo}}</p>

<h2 dir="rtl" id="Syntax" name="Syntax">روش استفاده</h2>

<pre class="twopartsyntaxbox" dir="rtl"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("top")}}
</pre>

<pre dir="rtl">top: 3px         /* &lt;length&gt; مقادیر */
top: 2.4em

top: 10%         /* &lt;percentages&gt; of the height of the containing block */

top: auto

top: inherit
</pre>

<h3 dir="rtl" id="مقادیر">مقادیر</h3>

<dl>
 <dt dir="rtl"><code>&lt;طول&gt;</code></dt>
 <dd dir="rtl">یک عدد منفی، null، یا مثبت  هست که {{cssxref("&lt;length&gt;")}} نشان می‌دهد:</dd>
 <dd>
 <ul dir="rtl">
  <li>برای عناصر با موقعیت مستقل (absolutely)، فاصله ازقسمت بالایی (لبه ی بالای) بلوک را مشخص می کند؛</li>
  <li>برای عناصر با موقعیت نسبی (relative)، اگر در حالت معمول (normal flow)  موقعیتی (position) مشخص نشده باشد، عنصر نسبت به موقعیت معمول (normal) خود به سمت پایین حرکت می کند.</li>
 </ul>
 </dd>
 <dt dir="rtl"><code>&lt;درصد&gt;</code></dt>
 <dd dir="rtl">یک {{cssxref("&lt;percentage&gt;")}} از ارتفاع بلوک شامل است، همانطور که در <a href="#" title="#">خلاصه</a> شرح داده شد مورد استفاده قرار می‌گیرد.</dd>
 <dt dir="rtl"><code>خودکار</code></dt>
 <dd dir="rtl">کلیدواژه‌ای است که بیان می‌کند:</dd>
 <dd>
 <ul dir="rtl">
  <li>برای عناصر با موقعیت مستقل، موقعیت عنصر بر مبنای ویژگی {{Cssxref("bottom")}} و ارتفاع مربوط تنظیم می‌شود: <code>auto</code> بعنوان ارتفاع بر مبنای محتوا.</li>
  <li>برای عناصر با موقعیت نسبی، جابجایی عنصر از موقعیت اصلی خود بر مبنای  ویژگی {{Cssxref("bottom")}} تنظیم می‌شود، یا اگر {{Cssxref("bottom")}} هم <code>auto</code> باشد، عنصر را جابجا نمی‌کند.</li>
 </ul>
 </dd>
 <dt dir="rtl"><code>به ارث بردن</code></dt>
 <dd dir="rtl">کلیدواژه‌ای است که نشان می‌دهد مقدار همان مقداری است که از عنصر والد خود محاسبه شده است (ممکن است بلوک شامل عنصر نباشد).</dd>
 <dd dir="rtl">مقدار نخست محاسبه می‌شود سپس بر اساس نوع آن که {{cssxref("&lt;length&gt;")}}، {{cssxref("&lt;percentage&gt;") }}، یا کلیدواژه‌ی <code>auto</code> است بکار می‌رود.</dd>
</dl>

<h2 dir="rtl" id="Examples" name="Examples">نمونه‌ها</h2>

<pre class="brush: css" dir="rtl">/* body می‌تواند با واحد px تعیین شود همینطور برای div */
body{
  width: 100%;
  height: 100%;
}

/* برای div هم می‌توان از واحد ٪ استفاده کرد */
div {
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px rgb(0,0,0) solid;
}</pre>

<pre class="brush: html" dir="rtl"> &lt;?xml version="1.0" encoding="utf-8"?&gt;
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
   &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
     &lt;title&gt;Mozilla.org height top left width percentage CSS&lt;/title&gt;
     &lt;style type="text/css"&gt;
       /* body می‌تواند با واحد px تعیین شود همینطور برای div */
       body {
         width: 100%;
         height: 100%;
       }
       /* برای div هم می‌توان از واحد ٪ استفاده کرد */
       div {
         position: absolute;
         left: 15%;
         top: 30%;
         bottom: 30%;
         width: 70%;
         height: 40%;
         text-align: left;
         border: 3px rgb(0,0,0) solid;
       }
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;center&gt;
        &lt;div&gt;
             ...محتوای آزمایشی...
        &lt;/div&gt;
      &lt;/center&gt;

   &lt;/body&gt;
 &lt;/html&gt;</pre>

<h2 dir="rtl" id="Specifications" name="Specifications">مشخصات</h2>

<table class="standard-table" dir="rtl">
 <thead>
  <tr>
   <th scope="col">مشخصات</th>
   <th scope="col">وضعیت</th>
   <th scope="col">دیدگاه</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>top</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial specification</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="Browser_compatibility" name="Browser_compatibility">سازگاری مرورگر</h2>

<p dir="rtl">{{CompatibilityTable}}</p>

<div dir="rtl" id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div dir="rtl" id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>