blob: d0ccad0e5f2885985bd4a319c73a1c471819b3a4 (
plain)
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
|
---
title: موقعیت
slug: Web/CSS/position
translation_of: Web/CSS/position
---
<p dir="rtl">{{CSSRef}}</p>
<h2 dir="rtl" id="خلاصه">خلاصه</h2>
<p dir="rtl">ویژگی <code style="font-size: 14px;">position <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></code> قوانین دیگری برای موقعیت دادن به عناصر انتخاب می‌کند، طراحی شده تا برای افکت‌های انیمیشن نوشته شده مفید باشد.</p>
<p dir="rtl">{{cssinfo}}</p>
<p dir="rtl">یک <strong>عنصر موقعیت گرفته</strong> عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> relative، absolute، یا fixed است.</p>
<p dir="rtl">یک <strong>عنصر مستقل موقعیت گرفته</strong> شده عنصری است که ویژگی موقعیت <a href="/en-US/docs/CSS/computed_value" title="/en-US/docs/CSS/computed_value">محاسبه شده</a> absolute یا fixed است.</p>
<p dir="rtl">{{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} ویژگی‌هایی هستند که موقعیت عناصر موقعیت داده شده را مشخص می‌کنند.</p>
<h2 dir="rtl" id="نحو">نحو</h2>
<p dir="rtl"> </p>
<pre class="twopartsyntaxbox" dir="rtl" style="margin-top: 0px; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("position")}}</pre>
<pre dir="rtl" style="margin-bottom: 1.286em; padding: 0px; white-space: normal; font-size: 14px; line-height: 18px;">position: static position: relative position: absolute position: fixed position: inherit</pre>
<h3 dir="rtl" id="مقادیر">مقادیر</h3>
<p dir="rtl"><strong><em>static</em></strong></p>
<p dir="rtl">رفتار عادی. ویژگی‌های top، right، bottom، و left اعمال نمی‌شوند.</p>
<p dir="rtl"><strong><em>relative</em></strong></p>
<p dir="rtl">عناصر را طوری روی سطح پخش می‌کند گویی موقعیت داده نشدند، و سپس موقعیت عنصر را تنظیم می‌کند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار می‌گذارد). position: relative روی عناصر <code>table-*-group</code>، <code>table-row</code>، <code>table-column</code>، <code>table-cell</code>، و <code>table-caption</code> بی تاثیر است.</p>
<p dir="rtl"><strong><em>absolute</em></strong></p>
<p dir="rtl">برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نزدیک‌ترین والد موقعیت داده شده یا نسبت به بلوک شامل موقعیت می‌دهد. جعبه‌هایی که موقعیت مستقل دارند می‌توانند حاشیه/margin داشته باشند، آنها با هیچ یک از حواشی دیگر فروپاشی نمی‌کنند.</p>
<p dir="rtl"><strong><em>fixed</em></strong></p>
<p dir="rtl">برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نما/viewport صفحه‌ی نمایش موقعیت می‌دهد و با حرکت دادن صفحه/scroll حرکت نمی‌کند. در زمان چاپ، در همان موقعیت روی هر صفحه ثابت می‌ماند.</p>
<h2 dir="rtl" id="نمونه‌ها">نمونه‌ها</h2>
<h3 dir="rtl" id="موقعیت_دادن_نسبی">موقعیت دادن نسبی</h3>
<p dir="rtl">برای نسبی موقعیت دادن یک عنصر که از بالا و چپ ۲۰ پیکسل از موقعیت عادی خودش تفاوت دارد، دستور CSS زیر استفاده می‌شود.</p>
<pre dir="rtl">#two { position: relative; top: 20px; left: 20px; }</pre>
<p dir="rtl">به عناصر دیگر توجه کنید که چطور نمایش داده می‌شوند در حالی که "Two" در موقعیت عادی خودش بود و فضا درنظر می‌گیرد.</p>
<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4922/=relative-positioning.png" style="height: 136px; width: 519px;"></p>
<h3 dir="rtl" id="موقعیت_دادن_مستقل">موقعیت دادن مستقل</h3>
<p dir="rtl">عناصری که نسبی موقعیت داده شدند همچنان در روند عادی عناصر در سند درنظر گرفته می‌شوند. در مقابل، عنصری که مستقل موقعیت داده شده از روند خارج شده بنابراین زمانی که عناصر دیگر قرار داده می‌شود هیچ فضایی نمی‌گیرد. عنصری که موقعیت مستقل گرفته است موقعیت نسبی نسبت به نزدیک‌ترین والد موقعیت داده شده دارد. اگر والدی که موقعیت گرفته باشه وجود نداشته باشد، ظرف آغازین استفاده می‌شود.</p>
<p dir="rtl">در مثال زیر، والد آبی رنگ div موقعیت نسبی گرفته است (پس نزدیک‌ترین والد موقعیت گرفته شده خواهد بود) و جعبه‌ی Two مستقل موقعیت گرفته است:</p>
<pre dir="rtl">#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }</pre>
<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4923/=absolute-positioning.png" style="height: 134px; width: 518px;"></p>
<p dir="rtl">اگر #ancestor موقعیت نسبی نداشته بود، جعبه‌ی Two با موقعیت نسبی نسبت به بالاترین گوشه سمت چپ صفحه ظاهر می‌شد.</p>
<p dir="rtl">موقعیت دادن ثابت</p>
<p dir="rtl">موقعیت ثابت مشابه موقعیت دادن مستقل است، با این استثنا که بلوک شامل عنصر همان نما/viewport است. این موقعیت اغلب برای ساخت یک عنصر شناوری که حتی پس از حرکت دادن صفحه/scroll در همان موقعیت می‌ماند استفاده می‌شود. در مثال زیر جعبه‌ی "One" با فاصله‌ی ۸۰ پیکسل از بالا و صفحه و ۲۰ پیکسل از سمت چپ موقعیت ثابت دارد:</p>
<pre dir="rtl">#one { position: fixed; top: 80px; left:20px; }</pre>
<p dir="rtl">وقتی بالای صفحه را نگاه می‌کنید، جعبه در بالاترین گوشه سمت چپ ظاهر می‌شود، و پس از حرکت دادن صفحه، در همان جایگاه نسبی نسبت به نما باقی می‌ماند:</p>
<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4924/=fixed-1.png?size=thumb" style="height: 279px; width: 356px;"></p>
<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4925/=fixed-2.png?size=thumb" style="height: 222px; width: 352px;"></p>
<h2 dir="rtl" id="نکات">نکات</h2>
<p dir="rtl">برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}} جابجایی عمودی از موقعیت عادی و ویژگی {{Cssxref("left")}} یا {{Cssxref("right")}} جابجایی افقی را تعیین می‌کنند.</p>
<p dir="rtl">برای عناصری که موقعیت مستقل دارند، ویژگی‌های {{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} جابجایی‌ها از ضلع بلوک شامل عنصر(عنصری که نسبت به آن موقعیت نسبی دارد) تعیین می‌کنند. حاشیه برای آن عنصر اگر وجود داشته باشد نخست حاشیه‌ها اعمال می‌شوند سپس جابجایی‌ها.</p>
<p dir="rtl">اکثر اوقات، عناصر مستقل موقعیت گرفته شده مقادیر خودکار/auto برای {{Cssxref("height")}} و {{Cssxref("width")}} دارند تا طول و عرض عنصر متناسب با محتوای آن تغییر کند.</p>
<p dir="rtl"><span style="line-height: 21px;">اگر {{Cssxref("top")}} و {{Cssxref("bottom")}} هر دو تعیین شوند(فنی، نه خودکار)، {{Cssxref("top")}} برنده می‌شود.</span></p>
<p dir="rtl"><span style="line-height: 21px;">اگر }}Cssxref("left")}} و {{Cssxref("right")}} هر دو تعیین شوند، {{Cssxref("left")}} وقتی {{Cssxref("direction")}} ltr/چپ به راست هست (انگلیسی، ژاپنی افقی، غیره.) و {{Cssxref("right")}} برنده خواهد شد وقتی {{Cssxref("direction")}} rtl/راست به چپ هست(پارسی، عبری، غیره.).</span></p>
<h2 dir="rtl" id="مشخصات"><span style="line-height: 21px;">مشخصات</span></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> </td>
<td>{{Spec2('CSS2.1')}}</td>
<td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
</tr>
</tbody>
</table>
<h2 dir="rtl" id="سازگاری_مرورگر">سازگاری مرورگر</h2>
<p dir="rtl">{{CompatibilityTable}}</p>
<div 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 (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
<td>4.0</td>
<td>4.0</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td><code>fixed </code>value</td>
<td>1.0</td>
<td>1.0 (1.0)</td>
<td>7.0</td>
<td>4.0</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>1.0 (1.0) ({{anch("Gecko notes", "See notes")}})</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
