Layout - ویژگی position

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی position نوع متد موقعیت‌یابی مورد استفاده برای یک عنصر (static ,relative ,fixed ,absolute یا Sticky) را مشخص می‌کند.[۱]

ویژگی positon

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

پنج مقدار متفاوت برای موقعیت وجود دارد:

  • static
  • relative
  • fixed
  • absolute
  • sticky

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

position: static; (به فارسی: موقعیت: استاتیک)

عناصر HTML بطور پیش‌فرض به صورت استاتیک موقعیت دهی می‌شوند.

عنصرهایی که به صورت Static موقعیت دهی شده‌اند تحت تأثیر ویژگی‌های بالا (به انگلیسی: top)، پایین (به انگلیسی: bottom)، چپ (به انگلیسی: left)، و راست (به انگلیسی: right) قرار نمی‌گیرند.

یک عنصر با position: static; به هیچ روش خاصی موقعیت‌یابی نمی‌شود، این عناصر همیشه با توجه به جریان عادی صفحه موقعیت دهی می‌شوند.

عنصر <div> دارای position:static; است.

در اینجا کد CSS مورد استفاده وجود دارد:

مثال
1 div.static {
2   position: static;
3   border: 3px solid #73AD21;
4 }


position: relative; (به فارسی: موقعیت: نسبی)

یک عنصر با position: relative; به توجه به موقعیت عادی خود موقعیت دهی می‌شود.

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

عنصر <div> دارای position:relative; است.

در اینجا CSS ای که استفاده قرار شده وجود دارد:

مثال
1 div.relative {
2   position: relative;
3   left: 30px;
4   border: 3px solid #73AD21;
5 }


position: fixed; (به فارسی: موقعیت: ثابت)

یک عنصر با position: fixed; با توجه به viewport موقعیت دهی می‌شود، که یعنی اگر صفحه پیمایش شود عنصر در یک محل ثابت باقی می‌ماند. ویژگی‌های بالا (به انگلیسی: top)، راست (به انگلیسی: right)، پایین (به انگلیسی: bottom)، و چپ (به انگلیسی: left) برای موقعیت دهی عنصر استفاده می‌شوند.

یک عنصر fixed (به فارسی: ثابت) هیچ فضای خالی‌ای را در صفحه‌ای که معمولاً در آن قرار می گیرد، باقی نمی‌گذارد.

به عنصری که در گوشه پایین صفحه راست قرار گرفته توجه کنید. در اینجا کد CSS ای که مورد استفاده قرار گرفته‌، آمده است:

مثال
1 div.fixed {
2   position: fixed;
3   bottom: 0;
4   right: 0;
5   width: 300px;
6   border: 3px solid #73AD21;
7 }


position: absolute; (به فارسی: موقعیت: مطلق)

یک عنصر با position: absolute; نسبت به نزدیکترین جد موقعیت‌دهی شده (به جای موقعیت دهی نسبی با توجه به viewport، همانند fixed) موقعیت‌دهی می‌شود.

اما؛ اگر یک عنصر موقعیت دهی شده absolute هیچ عنصر والدی نداشته باشد، این عصر از بدنه (به انگلیسی: body) سند استفاده کرده، و با پیمایش در طول صفحه جابه‌جا می‌شود.

نکته: عنصر «موقعیت دهی شده» عنصری است که موقعیت آن هر چیزی جز staticاست.

در اینجا مثالی ساده ای وجود دارد:

عنصر <div> دارای position:relative; است.

عنصر <div> دارای position:absoulute; است.

در اینجا کد CSS مورد استفاده قرار گرفته، آمده ‌است:

مثال
 1 div.relative {
 2   position: relative;
 3   width: 400px;
 4   height: 200px;
 5   border: 3px solid #73AD21;
 6 }
 7 
 8 div.absolute {
 9   position: absolute;
10   top: 80px;
11   right: 0;
12   width: 200px;
13   height: 100px;
14   border: 3px solid #73AD21;
15 }


position: sticky; موقعیت: چسبنده

یک عنصر با position: sticky; با توجه به موقعیت پیمایش کاربر موقعیت دهی می‌شود.

یک عنصر Sticky با توجه به موقعیت پیمایش، بین relative و fixedتغییر می‌کند. این موقعیت تا زمانی نسبی است که فاصله (offset) موقعیت داده شده در viewport برآورده شود - سپس در جای خود "می‌چسبد" (مانند position: fixed;)

نکته: اینترنت اکسپلور، Edge 15 و نسخه های قدیمی‌تر از موقعیت دهی Sticky پشتیبانی نمی‌کنند. سافاری نیازمند یک پیشوند -webkit- است (مثال زیر را ببینید). باید حداقل یکی از ویژگی‌های top، right، bottom، یا left را برای موقعیت دهی sticky مشخص کنید تا کار کند.

در این مثال، زمانی که شما به موقعیت پیمایش آن می‌رسید عنصر sticky به بالای صفحه می‌چسبد (top: 0).

مثال
1 div.sticky {
2   position: -webkit-sticky; /* Safari */
3   position: sticky;
4   top: 0;
5   background-color: green;
6   border: 2px solid #4CAF50;
7 }


عناصر هم پوشان

زمانی که عناصر موقعیت‌دهی می‌شوند، می‌توانند با سایر عناصر هم پوشانی داشته باشند.

ویژگی z-index ترتیب پشته‌ای (روی هم قرار گرفتن) یک عنصر را (که عنصر می‌بایست در جلو، یا پشت، سایر قرار گیرد) مشخص می‌کند.

یک عنصر می‌تواند ترتیب پشته‌ای مثبت یا منفی داشته باشد:

این یک عنوان است.

به خاطر اینکه تصویر دارای z-index ای برابر با -1 دارد، تصویر در پشت متن قرار خواهد گرفت.

مثال
1 img {
2   position: absolute;
3   left: 0px;
4   top: 0px;
5   z-index: -1;
6 }


یک عنصر با ترتیب پشته‌ای بزرگتر همیشه در جلوی یک عنصر با ترتیب پشته‌ای کمتر قرار می‌گیرد.

نکته: اگر دو عنصر موقعیت دهی شده بدون مشخص کردن یک z-index باهم همپوشانی داشته باشند، آخرین عنصری که در کد HTML موقعیت دهی شده‌است در بالای صفحه نمایش داده خواهد شد.

قرار دادن متن درون یک تصویر

نحوه قرار دادن متن بر روی یک تصویر

مثال

پایین سمت چپ، بالا سمت چپ، بالا سمت راست، پایین سمت راست، وسط


مثالهای بیشتر

تنظیم Shape یک عنصر

این مثال نحوه تنظیم shape روی یک عنصر را نشان می‌دهد. این عنصر به این شکل بریده می‌شود، و نمایش داده می‌شود.

خودتان را با تمرینها امتحان کنید!

تمامی ویژگی‌های موقعیت دهی در CSS

ویژگی توضیحات
bottom حاشیه لبه پایین را برای یک جعبه موقعیت دهی شده تنظیم می‌کند
clip یک عنصر را که به صورت absolute موقعیت دهی شده‌است را برش می‌دهد
left حاشیه لبه چپ یک جعبه موقعیت دهی شده را تنظیم می‌کند
position نوع موقعیت دهی یک عنصر را مشخص می‌کند
right حاشیه لبه راست را برای یک جعبه موقعیت دهی شده تنظیم می‌کند
top حاشیه لبه بالا را برای یک جعبه موقعیت دهی شده تنظیم می‌کند
z-index ترتیب قرارگیری پشته‌ای یک عنصر را تنظیم می‌کند


منابع آموزشی