خصوصیات سی اس اس اهمیت ویژه در طراحی وب سایت دارند بدین منظور تصمیم گرفتیم تا برخی از پر کاربرد ترین خواص را برای شما کاربران عزیز شرح دهیم . این بخش به معرفی خاصیت position در css می پردازیم . در همین آغاز مطلب باید بدانید که خاصیت position در css برای موقعیت دهی به المنت ها و یا همان عناصر html استفاده می شود .

موقعیت عناصر اچ تی ام ال برخی اوقات ممکن است شما را دچار اشتباه کند . گاهی اوقات ممکن است عناصر روی هم قرار بگیرند و تنظیم آن ها کمی دشوار باشد البته اگر شما با این خاصیت آشنا نباشید .

به کمک خاصیت position در css شما می توانید موقعیت عناصر اچ تی ام ال را تغییر دهید . همان طور که می دانید هر خاصیتی دارای مقداری است که رفتار عناصر را تغییر می دهد . خاصیت position نیز دارای مقادیری می باشد که متناسب با آن ها عناصر اچ تی ام ال موقعیت دهی می شوند .

مقدار های خاصیت position در سی اس اس :

برای این خاصیت 4 مقدار و یا روش موقعیت دهی در نظر گرفته شده که به شرح زیر هستند :

static
relative
fixed
absolute

قبل از این که به توضیح هر یک از این روش ها و یا همان مقدار ها برای خاصیت موقعیت دهی عناصر بپردازیم باید بگوییم که موقعیت عناصر در صفحه وب با کمک خصوصیات top و bottom و left و یا right قابل تنظیم است . اما این خصوصیت ها زمانی کار می کنند که در قبل از آن خاصیت position تنظیم شده باشد . خصوصیات top و bottom و left و یا right با توجه به مقدار های متفاوت خاصیت position رفتار های متفاوتی خواهند داشت .

خاصیت position با مقدار static :

به صورت پیش فرض عناصر اچ تی ام ال دارای خاصیت و مقدار position : ctatic هستند . در وب سایت w3schools که منبع همین مطلب نیز هست نوشته شده که در صورتی که عناصر اچ تی ام ال دارای خاصیت و مقدار position : ctatic هستند، همیشه مطابق جریان معمول نمایش داده می شوند . این جمله به این معنی است که عناصر اچ تی ام ال در همان جایی که کد آن ها قرار دارد نمایش داده می شوند . همچنین باید بدانید که خصوصیات top و bottom و right و left زمانی که عناصر دارای خاصیت position : ctatic هستند اثری ندارند و در واقع کار نمی کنند .

عملکرد خاصیت موقعیت دهی با مقدار relative :

عناصر اچ تی ام ال در این حالت نسبت به مکان های نرمال خودشان، موقعیت دهی می شوند . زمانی که عناصر اچ تی ام ال دارای خاصیت و مقدار position : relative هستند تنظیم خصوصیات top و bottom و right و left باعث می شوند تا عناصر از حالت طبیعی خودشان دور شوند .

دو نکته بسیار مهم که باید درباره خاصیت و مقدار position : relative بدانید این است که عنصری که به صورت نسبی یا همان Relative موقعیت دهی می شود، می تواند روی دیگر عناصر قرار بگیرد، اما مکان عادی عنصر همچنان رزور شده و به صورت خالی باقی می ماند .

نکته ی دومی که باید بدانید این است که عنصری که به صورت نسبی همان Relative موقعیت دهی می شود، اغلب به عنوان ظرفی برای عناصر با خاصیت و مقدار position : absolute استفاده می شوند .

position عناصر با مقدار fixed :

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

برای عناصر اچ تی ام ال با خاصیت و مقدار position : fixed می توانید خصوصیات top و bottom و right و left را نیز تنظیم کنید . عناصری که دارای این خاصیت هستند هیچ فضای خالی را در صفحه وب باقی نمی گذارند . جالب است که بدانید مرورگر های IE7 و IE8 در صورتی که یک DOCTYPE! در بالای صفحه تنظیم کرده باشیم این حالت را پشتیبانی می کنند و در غیر این صورت کار نمی کنند . باید بدانید که عناصری که به صورت fixed مقدار دهی شده اند، در واقع از حالت عادی خود خارج شده است و در اچ تی ام ال عنصری که این گونه رفتار کند وجود ندارد .

position عناصر با مقدار absolute :

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

لازم به ذکر است که عناصری که دارای مقدار Absolute برای خاصیت position هستند، می توانند روی دیگر عناصر اچ تی ام ال قرار بگیرند .

سخن پایانی …

در صورت رضایت از این مطلب خواهشمندیم که این مطلب را به دوستان خود به اشتراک بگذارید . اگر احساس کردید که مطلب کامل نیست و یا شما اطلاعات مفید تری دارید لطفا ان را در بخش نظرات با ما به اشتراک بگذارید .

یک پیشنهاد عالی برای کاربران عزیز دهکده وب اگر به دنبال قالب زیبا و جذاب برای طراحی وب سایتان می گردید به لینک زیر مراجعه کنید و جذاب ترین و باکیفیت ترین قالب های وردپرسی را دانلود کنید .

دانلود قالب های وردپرسی

به شما توصیه می کنیم تا به دیگر مطالب سایت ما که در زمینه های زیر می باشد نیز سر بزنید :

در نهایت امیداوریم که از مطالب ارائه شده در باره ” معرفی خاصیت position در css ” راضی باشید .

معرفی خاصیت position در css