ویژگی Position در css

4 / 10 از 14 کاربر

در این بخش از آموزش Css خاصیت position را  توضیح می دهیم.
از ویژگی position برای تعیین مکان یک عنصر استفاده می شود به عبارتی برای اینکه بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم از این ویژگی استفاده می کنیم.در طراحی سایت ویژگی Position از مهمترین کارها به حساب می آید.
توجه داشته باشید که Position موقعیت یک عنصر در صفحه را ثابت می کنه ولی تو مرورگر اکسپلورر6 ساپورت نمی شود و معمولا با اختلالاتی روبرو می شود.
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;}

ارسال نظر و نظرات ثبت شده
فاطمه.زرین دشت :
8 2
سلااااام .این بخش و هم تموم کردم و متوجه بودم که چطوریه...ولی نمیدونم وقتی خواستم سایت سازی کنم چه کاربردهایی داره و چه جوری باید ازش استفاده کنم؟اگه جواب بدید ممنون میشم.
مدیریت : پاسخ
6 3
با سلام خدمت فاطمه ی عزیز و تشکر از لطف همیشگیت به سایت شرکت مبنا مورد کاربردی استفاده از این کد مثلا در استفاده از درج لگوی اینماد در یک سایت می باشد و می توان آن موقعیت را به صورت فیکس یا متغیر تعریف کرد. مثلا این سایت فروشگاهی رو و محل قرار گیری نماد اعتماد با کمک این کد نوشتن : http://tehranmarkshop.com/
فاطمه.زرین دشت ... :
9 8
سلام من این قسمت و متوجه هستم ولی نمیدونم در سایت سازی باید کجا استفاده بشه و کارکردش چیه؟اگه کمی منو روشن کنید ممنون میشم.
علی :
6 2
با سلام مطالب خیلی خوب و مختصر گفته میشن و این خیلی عالیه.ممنون
نام شما :
ایمیل :
تلفن تماس :
متن پیغام :