آموزش ویژگی position در CSS

ویژگی position روش موقعیت دهی را برای یک عنصر را مشخص می کند(static و relative و fixed و absolute یا sticky).

ویژگی position در CSS

ویژگی position روش موقعیت دهی یک عنصر را مشخص می کند. برای ویژگی position پنج مقدار مختلف وجود دارند، که عبارتند از:

• static
• relative
• fixed
• absolute
• sticky

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

بررسی ویژگی و مقدار position: static

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

کد CSS به کار رفته، به صورت زیر است:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

بررسی ویژگی و مقدار position: relative

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

کد CSS به کار رفته به صورت زیر است:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

بررسی ویژگی و مقدار position: fixed

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

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

استفاده از ویژگی و مقدار position: absolute

یک عنصر که از ویژگی و مقدار position: absolute استفاده می کند،(به جای اینکه مانند fixed، نسبت به viewport موقعیت دهی شود) نسبت به نزدیک ترین عنصر والد(پدر) خود موقعیت دهی می شود. اما، اگر یک عنصر که از absolute استفاده می کند، والدی که موقعیت دهی شده باشد، نداشته باشد، از بخش body در سند(document) استفاده می کند و همراه با اسکرول صفحه حرکت می کند.

نکته: عناصری که به صورت absolute موقعیت دهی شده اند، از چیدمان عناصر عادی(normal flow) حذف می شوند و می توانند روی عناصر همپوشانی کنند(روی هم افتند).
در زیر، یک مثال ساده را مشاهده می کنید:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

استفاده از ویژگی و مقدار position: sticky

یک عنصر که دارای position: sticky باشد، بر اساس موقعیت اسکرول کاربر موقعیت دهی می شود. یک عنصر sticky بسته به موقعیت اسکرول، بین مقادیر relative و fixed تغییر می کند. این عنصر تا زمانی که به یک فاصله ی خاص در viewport برسد، به صورت position: relative می ماند؛ سپس در محل خود می چسبد(مانند position:fixed).

نکته: برای اینکه موقعیت دهی sticky کار کند، باید حداقل، از یکی از مقادیر top ، right , bottom، left استفاده کنید.

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

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

موقعیت دهی متن روی یک تصویر

در مثال زیر می آموزید که چگونه متن را روی گوشه ی بالا و سمت چپ یک تصویر موقعیت دهی کنید:

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

 در مثال زیر می آموزید که چگونه متن را روی گوشه ی بالا و سمت راست یک تصویر موقعیت دهی کنید:

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

 در مثال زیر می آموزید که چگونه متن را روی گوشه ی پایین و سمت چپ یک تصویر موقعیت دهی کنید:

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

 در مثال زیر می آموزید که چگونه متن را روی گوشه ی پایین و سمت راست یک تصویر موقعیت دهی کنید:

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

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

تنظیم شکل یک عنصر

این مثال نشان می دهد که چگونه می توانیم شکل(shape) یک عنصر را تنظیم کنیم. این عنصر به شکل زیر بریده شده است:

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}