ویژگی position در CSS
ویژگی موقعیت (position)، مکان قرار گیری المان را مشخص می کند.
position: static; مقدار پیش فرض همه ی المان ها (پیش فرض) position: relative; نوع قرار گیری المان به صورت نسبی - نسبت به حالت static position: fixed; نوع قرار گیری المان به صورت نسبی - نسبت به viewport position: absolute; نوع قرار گیری المان به صورت نسبی - نسبت به اولین المان والد نسبی position: sticky; نوع قرار گیری المان به صورت نسبی - نسبت به اسکرول کاربر
المان هایی که position غیر از static داشته باشند، می توانند از ویژگی های زیر نیز استفاده کنند:
- ویژگی top: فاصله از بالا
- ویژگی bottom: فاصله از پایین
- ویژگی right: فاصله از سمت راست
- ویژگی left: فاصله از سمت چپ
- ویژگی z-index: بُعد سوم (محور z) یا عمق المان ها نسبت به هم
ویژگی position: static در CSS
مقدار ویژگی position، به صورت پیش فرض static است. بازخورد المان های دارای این مقدار مانند همان چیزی است که تا به الان دیده اید.
نکته: المان های دارای مقدار static، نمی توانند از ویژگی های top، right، bottom، left، z-index استفاده کنند.
position: static;ویژگی position: relative در CSS
با استفاده از مقدار relative، می توان یک المان را نسبت به موقعیت حالت static، جا به جا کرد.
این المان صرفا بابت تست نوشته شده است.
نکته: تغییر موقعیت المان، تأثیری روی موقعیت المان‌های دیگر ندارد.
position: relative;ویژگی position: fixed در CSS
با استفاده از مقدار fixed، می توان یک المان را نسبت به viewport، جا به جا کرد.
المان دارای مقدار fixed، در صورت اسکرول (scroll) شدن صفحه، جا به جا نمی‌شود.
نکته: برای مشاهده نمونه position:fixed، به سمت چپ پایین صفحه نمایش نگاه کنید.
نکته: کلمه viewport به معنی پورت نمایش است و منظور، آن قسمتی از مرورگر است که سایت را نمایش می دهد. viewport شامل آدرس بار مرورگر و ... نمی شود.
position: fixed;ویژگی position: absolute در CSS
با استفاده از مقدار absolute، می‌توان یک المان را نسبت به اولین والد با position نسبی، جا به جا کرد.
right: 0;
نکته: position های نسبی شامل relative، fixed ،sticky می شوند.
position: absolute;نکته: در صورتی که هیچ کدام از المان های والد position نسبی نداشته باشند، نسبت به body جا به جایی انجام می شود.
ویژگی position: sticky در CSS
با استفاده از مقدار sticky می توان یک المان را نسبت به اسکرول اولین والد با position نسبی، جا به جا کرد.
top: 0px;
end
نکته: position های نسبی شامل relative، fixed ،sticky می شوند.
position: sticky;خلاصه درس
در این درس با ویژگی نمایش (position) در CSS و مقادیر آن:
- static
- relative
- fixed
- absolute
- sticky
آشنا شدیم.
احسان اسلامی
