موقعیت

  • Revision slug: Web/CSS/موقعیت
  • Revision title: موقعیت
  • Revision id: 401393
  • Created:
  • Creator: cyletech
  • Is current revision? خیر
  • توضیح

Revision Content

{{CSSRef}}

خلاصه

ویژگی position CSS قوانین دیگری برای موقعیت دادن به عناصر انتخاب می‌کند، طراحی شده تا برای افکت‌های انیمیشن نوشته شده مفید باشد.

{{cssbox("position")}}

یک عنصر  موقعیت گرفته عنصری است که ویژگی موقعیت محاسبه شده relative، absolute، یا fixed است.

یک عنصر مستقل موقعیت گرفته شده عنصری است که ویژگی موقعیت محاسبه شده absolute یا fixed است.

{{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} ویژگی‌هایی هستند که موقعیت عناصر موقعیت داده شده را مشخص می‌کنند.

نحو

 

Formal syntax: {{csssyntax("position")}}
position: static position: relative position: absolute position: fixed position: inherit

مقادیر

static

رفتار عادی. ویژگی‌های top، right، bottom، و left اعمال نمی‌شوند.

relative

عناصر را طوری روی سطح پخش می‌کند گویی موقعیت داده نشدند، و  سپس موقعیت عنصر را تنظیم می‌کند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار می‌گذارد). position: relative روی عناصر table-*-group، table-row، table-column، table-cell، و table-caption بی تاثیر است.

absolute

برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نزدیک‌ترین والد موقعیت داده شده یا نسبت به بلوک شامل موقعیت می‌دهد. جعبه‌هایی که موقعیت مستقل دارند می‌توانند حاشیه/margin داشته باشند، آنها با هیچ یک از حواشی دیگر فروپاشی نمی‌کنند.

fixed

برای عنصر فضا کنار نمی‌گذارد. در عوض، در موقعیت نسبی مشخص شده نسبت به نما/viewport صفحه‌ی نمایش موقعیت می‌دهد و با حرکت دادن صفحه/scroll حرکت نمی‌کند. در زمان چاپ، در همان موقعیت روی هر صفحه ثابت می‌ماند.

نمونه‌ها

موقعیت دادن نسبی

برای نسبی موقعیت دادن یک عنصر که از بالا و چپ ۲۰ پیکسل از موقعیت عادی خودش تفاوت دارد، دستور CSS زیر استفاده می‌شود.

#two { position: relative; top: 20px; left: 20px; }

به عناصر دیگر توجه کنید که چطور نمایش داده می‌شوند در حالی که "Two" در موقعیت عادی خودش بود و فضا درنظر می‌گیرد.

موقعیت دادن مستقل

عناصری که نسبی موقعیت داده شدند همچنان در روند عادی عناصر در سند درنظر گرفته می‌شوند. در مقابل، عنصری که مستقل موقعیت داده شده از روند خارج شده بنابراین زمانی که عناصر دیگر قرار داده می‌شود هیچ فضایی نمی‌گیرد. عنصری که موقعیت مستقل گرفته است موقعیت نسبی نسبت به نزدیک‌ترین والد موقعیت داده شده دارد. اگر والدی که موقعیت گرفته باشه وجود نداشته باشد، ظرف آغازین استفاده می‌شود.

در مثال زیر، والد آبی رنگ div موقعیت نسبی گرفته است (پس نزدیک‌ترین والد موقعیت گرفته شده خواهد بود) و جعبه‌ی Two مستقل موقعیت گرفته است:

#ancestor { position: relative; background: #ddf; width: 500px; }

#two { position: absolute; top: 20px; left: 20px; }

اگر #ancestor موقعیت نسبی نداشته بود، جعبه‌ی Two با موقعیت نسبی نسبت به بالاترین گوشه سمت چپ صفحه ظاهر می‌شد.

موقعیت دادن ثابت

موقعیت ثابت مشابه موقعیت دادن مستقل است، با این استثنا که بلوک شامل عنصر همان نما/viewport است. این موقعیت اغلب برای ساخت یک عنصر شناوری که حتی پس از حرکت دادن صفحه/scroll در همان موقعیت می‌ماند استفاده می‌شود. در مثال زیر جعبه‌ی "One" با فاصله‌ی ۸۰ پیکسل از بالا و صفحه و ۲۰ پیکسل از سمت چپ موقعیت ثابت دارد:

#one { position: fixed; top: 80px; left:20px; }

وقتی بالای صفحه را نگاه می‌کنید، جعبه در بالاترین گوشه سمت چپ ظاهر می‌شود، و پس از حرکت دادن صفحه، در همان جایگاه نسبی نسبت به نما باقی می‌ماند:

نکات

برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}}  جابجایی عمودی از موقعیت عادی و ویژگی {{Cssxref("left")}} یا {{Cssxref("right")}} جابجایی افقی را تعیین می‌کنند.

برای عناصری که موقعیت مستقل دارند، ویژگی‌های {{Cssxref("top")}}، {{Cssxref("right")}}، {{Cssxref("bottom")}}، و {{Cssxref("left")}} جابجایی‌ها از ضلع بلوک شامل عنصر(عنصری که نسبت به آن موقعیت نسبی دارد) تعیین می‌کنند. حاشیه برای آن عنصر اگر وجود داشته باشد نخست حاشیه‌ها اعمال می‌شوند سپس جابجایی‌ها.

اکثر اوقات، عناصر مستقل موقعیت گرفته شده مقادیر خودکار/auto برای {{Cssxref("height")}} و {{Cssxref("width")}} دارند تا طول و عرض عنصر متناسب با محتوای آن تغییر کند.

اگر {{Cssxref("top")}} و {{Cssxref("bottom")}} هر دو تعیین شوند(فنی، نه خودکار)، {{Cssxref("top")}} برنده می‌شود.

اگر }}Cssxref("left")}} و {{Cssxref("right")}} هر دو تعیین شوند، {{Cssxref("left")}} وقتی {{Cssxref("direction")}} ltr/چپ به راست هست (انگلیسی، ژاپنی افقی، غیره.) و {{Cssxref("right")}} برنده خواهد شد وقتی {{Cssxref("direction")}} rtl/راست به چپ هست(پارسی، عبری، غیره.).

مشخصات

دیدگاه وضعیت مشخصات
  {{Spec2('CSS2.1')}} {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}

سازگاری مرورگر

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) ({{anch("Gecko notes", "See notes")}}) 4.0 4.0 1.0 (85)
fixed value 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} 1.0 (1.0) ({{anch("Gecko notes", "See notes")}}) {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

 

Revision Source

<p dir="rtl">{{CSSRef}}</p>
<h2 dir="rtl" id=".D8.AE.D9.84.D8.A7.D8.B5.D9.87">خلاصه</h2>
<p dir="rtl">ویژگی&nbsp;<code style="font-size: 14px;">position&nbsp;<a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></code>&nbsp;قوانین دیگری برای موقعیت دادن به عناصر انتخاب می‌کند، طراحی شده تا برای افکت‌های انیمیشن نوشته شده مفید باشد.</p>
<p dir="rtl"><span style="line-height: 21px;">{{cssbox("position")}}</span></p>
<p dir="rtl">یک <strong>عنصر &nbsp;موقعیت گرفته</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=".D9.86.D8.AD.D9.88">نحو</h2>
<p dir="rtl">&nbsp;</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=".D9.85.D9.82.D8.A7.D8.AF.DB.8C.D8.B1">مقادیر</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">عناصر را طوری روی سطح پخش می‌کند گویی موقعیت داده نشدند، و &nbsp;سپس موقعیت عنصر را تنظیم می‌کند، بدون آنکه ترکیب را تغییر دهد (بنابراین برای عنصر یک جای باز جایی که باید داشته باشد و موقعیت داده نشده کنار می‌گذارد). 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=".D9.86.D9.85.D9.88.D9.86.D9.87.E2.80.8C.D9.87.D8.A7">نمونه‌ها</h2>
<h3 dir="rtl" id=".D9.85.D9.88.D9.82.D8.B9.DB.8C.D8.AA_.D8.AF.D8.A7.D8.AF.D9.86_.D9.86.D8.B3.D8.A8.DB.8C">موقعیت دادن نسبی</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="width: 519px; height: 136px;" /></p>
<h3 dir="rtl" id=".D9.85.D9.88.D9.82.D8.B9.DB.8C.D8.AA_.D8.AF.D8.A7.D8.AF.D9.86_.D9.85.D8.B3.D8.AA.D9.82.D9.84">موقعیت دادن مستقل</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="width: 518px; height: 134px;" /></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="width: 356px; height: 279px;" /></p>
<p dir="rtl"><img alt="" src="https://developer.mozilla.org/@api/deki/files/4925/=fixed-2.png?size=thumb" style="width: 352px; height: 222px;" /></p>
<h2 dir="rtl" id=".D9.86.DA.A9.D8.A7.D8.AA">نکات</h2>
<p dir="rtl">برای عناصری که موقعیت نسبی دارند، ویژگی {{Cssxref("top")}} یا {{Cssxref("bottom")}} &nbsp;جابجایی عمودی از موقعیت عادی و ویژگی {{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>
<p dir="rtl"><span style="line-height: 21px;">مشخصات</span></p>
<table align="left" class="standard-table" dir="rtl">
  <thead>
    <tr>
      <th scope="col">دیدگاه</th>
      <th scope="col">وضعیت</th>
      <th scope="col">مشخصات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
    </tr>
  </tbody>
</table>
<p dir="rtl">سازگاری مرورگر</p>
<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>&nbsp;</p>
Revert to this revision