موقعیت

خلاصه

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

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

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

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

نحو

Formal syntax: static | relative | absolute | sticky | fixed

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; }

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

نکات

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

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

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

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

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

مشخصات

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