ویژگی position در css تعیین موقعیت مکانی تگ html

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت position در زبان css توضیحاتی را ارائه نماییم.

ویژگی position در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

ویژگی position در css تعیین موقعیت مکانی تگ html

معرفی ویژگی کاربردی position در زبان طراحی سی اس اس

توسط خاصیت position می توانیم موقعیت مکانی یک تگ html را در جهات مختلف تعیین نماییم.

در حالت پیش فرض تمام تگ های html در حالت flow یا جریان یکسان در صفحه جابجا می شوند.

به صورت پیش فرض کلیه تگ های html که برای آنها خصوصیت position را تعیین نکردید، در وضعیت static قرار دارند.

در صورتی که برای تگ html ، ویژگی کاربردی position را تعریف می کنیم، یعنی می خواهیم مقدار پیش فرض static در تگ html مربوطه را به یکی از مقادیر absolute یا relative یا fixed و یا sticky تغییر دهیم.

گاهی اوقات احتیاج داریم که یک عنصر html را در یک مکان سفارشی جدید قرار بدهیم. و موقعیت آن تگ html را خودمان تعیین نماییم. و یا گاهی نیاز داریم چند لایه یا تگ html را روی هم قرار بدهیم. در این مواقع از خاصیت position در سی اس اس استفاده می کنیم.

زمانی که با خصوصیت position ، مقدار پیش فرض static را تغییر می دهید میتوانیم توسط خاصیت های Right و Left و Top و Bottom یک عنصر html را در موقعیت های راست ، چپ ، بالا ، پایین تنظیم کنید.

مقادیر صفت کاربردی position در زبان طراحی سی اس اس

صفت کاربردی position که در زبان طراحی CSS2 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:

  1. مقدار static
  2. مقدار absolute
  3. مقدار fixed
  4. مقدار relative
  5. مقدار sticky –> ( در CSS3 اضافه شده است )
  6. مقدار initial
  7. مقدار inherit

ویژگی position در css تعیین موقعیت مکانی تگ html

مقدار static درون خاصیت position در زبان سی اس اس

اگر خاصیت position را برابر با مقدار static قرار دهیم، یعنی می خواهیم تگ html مربوطه در حالت flow یا جریان یکسان با سایر تگ های html که دارای position با مقدار static هستند، قرار گیرد.

معمولا زمانی در خصوصیت position از مقدار static استفاده می کنیم که بخواهیم، وضعیت مکانی یک عنصر html را که با خصوصیت position تغییر کرده به حالت پیش فرض برگردانیم.

مقدار static به عنوان مقدار پیش فرض خصوصیت position می باشد.

مثال براساس مقدار static برای خاصیت position

مقدار absolute درون خاصیت position در زبان سی اس اس

اگر خاصیت position را برابر با مقدار absolute قرار دهیم، یعنی می خواهیم تگ html مربوطه را نسبت به تگ html یا تگ های html اجدادش جابجا کرده و تغییر مکان دهیم.

زمانی که یک تگ html در حالت absolute مقداردهی شود، جابجا شدن عنصر html مورد نظر نسبت به اولین پدری از اجدادش که حالت relative دارد انجام می شود. و مختصات آن هم نقطه صفر top و صفر left عنصر پدر می باشد.

برخلاف حالت relative اگر یک تگ html مقدار absolute داشته باشد، بر روی تگ های html دیگر قرار می گیرد. و از حالت flow یا در جریان خارج می شود.

در صورتی که چند عنصر ، مقدار absolute را داشته باشند با استفاده از خصوصیت z-index می توانید ترتیب قرارگیری عناصر html روی هم را تعیین کنید.

مثال براساس مقدار absolute برای خاصیت position

ویژگی position در css تعیین موقعیت مکانی تگ html

ویژگی position در css تعیین موقعیت مکانی تگ html

مقدار fixed درون خاصیت position در زبان سی اس اس

اگر خاصیت position را برابر با مقدار fixed قرار دهیم، یعنی می خواهیم تگ html مربوطه در صفحه ثابت مانده و با اسکرول صفحه مکانش جابجا نشود.

مقدار fixed در خاصیت position کاملا مشابه مقدار absolute در خاصیت position است، و وجه اشتراک مهم این دو مقدار این است که هر دور از وضعیت flow یا در جریان خارج می شوند.

اما دو تفاوت مهم نیز بین مقدار fixed و مقدار absolute در خاصیت position وجود دارد:

1- در مقدار fixed ، عنصر html ثابت مانده و با اسکرول صفحه تغییر مکان نمی دهد، اما در مقدار absolute تگ html با اسکرول صفحه تغییر مکان می دهد.

2- در مقدار fixed ، عنصر html نسبت به قاب viewport تغییر مکان می دهد، اما در مقدار absolute نسبت به تگ یا تگ های html اجدادش تغییر مکان می دهد.

مثال براساس مقدار fixed برای خاصیت position

ویژگی position در css تعیین موقعیت مکانی تگ html

مقدار relative درون خاصیت position در زبان سی اس اس

اگر خاصیت position را برابر با مقدار relative قرار دهیم، دو اتفاق رخ می دهد:

1- تگ html مربوطه یک وضعیت مختصاتی برای آن دسته از فرزندانش که دارای مقدار absolute هستند تعیین می کند.

2- تگ html مربوطه یک وضعیت مختصاتی برای خودش نیز تعیین می کند.

در این حالت بدون اینکه عنصر html بر روی عناصر html دیگر قرار بگیرد ، می تواند در جهات راست و چپ و بالا و پایین جابجا شود.

عنصر html که در آن خاصیت position برابر با مقدار relative تعیین شده باشد، ماهیت flow یا در جریان بودن خود را از دست نمی دهد.

مثال براساس مقدار relative برای خاصیت position

مقدار sticky درون خاصیت position در زبان سی اس اس

اگر خاصیت position را برابر با مقدار sticky قرار دهیم، یعنی می خواهیم تگ html مربوطه رفتاری شبیه مقدار relative داشته ولی به محض رسیدن به یک نقطه تعیین شده به صورت ثابت مانده و موقعیت آن مانند مقدار fixed با اسکرول صفحه تغییر نکند.

مثال براساس مقدار sticky برای خاصیت position

مقدار initial درون خاصیت position در زبان طراحی سی اس اس

اگر خاصیت position را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت position در زبان طراحی سی اس اس

اگر خاصیت position را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

ویژگی position در css تعیین موقعیت مکانی تگ html

ویژگی position در css تعیین موقعیت مکانی تگ html