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 ” راضی باشید .

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

پرستو بخشی

پیشنهاد میکنیم مطالب زیر را هم بخوانید.
دلایل موفقیت YouTube چیست ؟

دلایل موفقیت YouTube چیست ؟

یوتیوب یکی از شبکه های اجتماعی است که غصه آن به امروز و دیروز ختم نمی شود این شبکه اجتماعی موفقیت زیادی را در این مدت کسب کرده است او از زمان راه اندازی خود که به چندیدن سال قبل بر می گردد و در ادامه آن را بیان خواهیم کرد دست از تلاش بر […]

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

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

طراحی سایت شرکتی مزایای زیادی هم برای کاربران و مشتریان و هم برای صاحبین ان دارد . یکی از این موارد جذاب درامد زایی با طراحی سایت شرکتی با شیوه های متفاوت است . در ادامه به این موارد می پردازیم . نکات درامد زایی با طراحی سایت شرکتی عبارت اند از : انتخاب شرکت […]

معرفی انواع کلمات کلیدی مخصوص بازاریابان محتوا بخش2

معرفی انواع کلمات کلیدی مخصوص بازاریابان محتوا بخش2

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

طراحی سایت خلاقانه

طراحی سایت خلاقانه

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

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

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

*

code

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

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