ویژگی Position در css

در این بخش از آموزش Css خاصیت position را  توضیح می دهیم.
از ویژگی position برای تعیین مکان یک عنصر استفاده می شود به عبارتی برای اینکه بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم از این ویژگی استفاده می کنیم.در طراحی سایت ویژگی Position از مهمترین کارها به حساب می آید.
توجه داشته باشید که Position موقعیت یک عنصر در صفحه را ثابت می کنه ولی تو مرورگر اکسپلورر۶ ساپورت نمی شود و معمولا با اختلالاتی روبرو می شود.
position شامل ویژگی هایی می باشد که عبارتند از top,left,right,bottom که هر کدام از این ویژگی ها موقعیت خاصی را برای عنصر به وجود می آورند.
خاصیت top موقعیت عنصر موردنظر را به سمت بالا هدایت می کند.خاصیت bottom میزان فاصله عناصر را از پایین پنجره مرورگر مشخص می کند.خاصیت left موقعیت عنصر مورد نظر را به سمت چپ هدایت می کند و خاصیت right فاصله عنصر را از سمت راست صفحه تعیین می کند.
position می تواند دارای چهار مقدار باشد که عبارتنداز:relative,static,absolute,fixed.

static position:این ویژگی همیشه پیش فرض می باشد و  تمام عناصر html به صورت static نوشته می شوند.در این ویژگی عناصر در همان جایی که در دستور نوشته شده اند به نمایش درمی آیند.

absolute position:این ویژگی این امکان  را می دهد که یک عنصر از صفحه را در هر موقعیتی نسبت به بالا،پایین،راست یا چپ صفحه نمایش دهیم.
fixed position:این ویژگی در طراحی سایت ، موقعیت یک عنصر در صفحه را مشخص می کند مثلا وقتی صفحه را کوچک می کنیم یا به منطقه ی خاصی از صفحه وب سایت می روییم عنصری که این خاصیت را دارا باشد به همان صورت قبلی باقی می ماند و تغییر نمی کند.

مثال زیر کاربرد خاصیت fixed position را در ویژگی position را نشان می دهد.

p.pos_fixed
{position:fixed;
top:30px;
right:5px;}
relative position:

 

با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.

relative position:با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.

مثال زیر کاربرد خاصیت relative positon را در ویژگی Position در طراحی سایت نشان می دهد.

h2.pos_left
{position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;}

منبع: sitedesign-co.com