051 3894 5808
0915 435 6018
دهکده وب
طراحی سایت » طراحی سایت » معرفی خاصیت position در css
معرفی خاصیت position در css
طراحی سایت 7 اکتبر 2019

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

پرستو بخشی پرستو بخشی

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

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

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

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

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

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

  1. static
  2. relative
  3. fixed
  4. absolute
خاصیت position در css

قبل از این که به توضیح هر یک از این روش ها و یا همان مقدار ها برای خاصیت موقعیت دهی عناصر بپردازیم باید بگوییم که موقعیت عناصر در صفحه وب با کمک خصوصیات 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 در css

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

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

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

سخن پایانی …

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

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

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

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

به اشتراک بگذارید!
پرستو بخشی

پرستو بخشی

پیشنهاد میکنیم مطالب زیر را هم بخوانید.
مزایای طراحی سایت شرکتی

مزایای طراحی سایت شرکتی

در مقالات قبلی راجب به طراحی سایت شرکتی صحبت کرده ایم اما در این مطلب می خواهیم بپردازیم به مزایای طراحی سایت شرکتی و این که چرا باید برای سازمان و شرکتتان به دنبال یک وب سایت باشید . برخی از افراد بر این باور اند که برای ان ها داشتن وب سایت ضرورتی ندارد، […]

30 افزونه اساسی WordPress که باید نصب کنید بخش 3

30 افزونه اساسی WordPress که باید نصب کنید بخش 3

اگر بخواهیم در جهان اینترنت حرفی برای گفتن داشته باشیم باید به ایجاد یک سایت فکر کنیم امروزه سایتهای بی شماری را همانطور که گفتیم با WordPress ساخته اند و این غیر قابل باور است که 30 درصد از محوریت سایتها را تشکل می دهد WordPress پس نصب بهترین افزونه ها را در ساخت سایتی […]

طراحی سایت اجاره ویلا

طراحی سایت اجاره ویلا

دوستان عزیز وقت ان رسیده است که از راه های سنتی و روش های قدیمی بازاریابی فاصله بگیریم و به سمت تکنولوژی و راه های مدرن پیش برویم . صاحبین ویلا ها باید از مدل سنتی به مدل مدرن و سیستم های حرفه ای نقل مکان کنند . از جمله اولین کار ها این می […]

طراحی سایت فروشگاه خشکبار

طراحی سایت فروشگاه خشکبار

با همه گیر شدن اینترنت و استفاده ی اکثر مردم از بستر بی انتهای ان و همچنین ایجاد شرایطی برای جلب اعتماد مردم، بسیاری از افراد تصمیم گرفتند تا خدمات و محصولات خود را به صورت انلاین به کمک طراحی سایت فروشگاه انلاین به فروش بگذارند . طراحی سایت همه ی مشاغل را در بر […]

هنوز دیدگاهی ثبت نشده!

دیدگاه خود را درباره این مطلب ارسال کنید!

خبرنامه دهکده وب

در خبرنامه دهکده وب عضو شوید و مطالب مفید را در ایمیل خود دریافت کنید.