درس دهم: خاصیت position در CSS و روش استفاده از آن

آموزش خاصیت position در CSS؛ آیا می خواهید اطلاعاتی در این زمینه کسب کنید؟ آیا می دانید منظور از خاصیت position در CSS چیست؟ چگونه می توان از این بخش در CSS استفاده کرد؟ انواع مختلف پوزیشن ها در زبان برنامه نویسی CSS کدامند؟

CSS یکی از بهترین و رایج ترین زبان های برنامه نویسی است که شما می توانید با استفاده از این زبان، سایت مورد نظر خودتان را طراحی و راه اندازی کنید. زبان برنامه نویسی CSS شامل پوزیشن های مختلفی است که می توانید از این پوزیشن ها استفاده کنید. اگر قصد طراحی سایت در ارومیه را دارید، باید با مفهوم پوزیشن در CSS آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد Position در CSS برای شما ارائه کنیم و به بررسی انواع پوزیشن ها در CSS بپردازیم.

آشنایی با مفهوم Position در CSS

شاید این سوال برای شما نیز پیش آمده باشد که مفهوم Position در CSS چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Position یکی از خاصیت ها در زبان برنامه نویسی CSS است که شما می توانید از این خاصیت استفاده کنید و بخش های خاصی را به سایت خودتان اضافی کنید. با استفاده از Position در زبان CSS می توان موقعیت قرارگیری یک تگ را در صفحه مشخص تعریف کرد. اگر می خواهید نحوه کار با خاصیت Position را یاد بگیرید، توصیه می کنیم تا در دوره آموزش CSS شرکت کنید.

جالب است بدانید، از طریق خاصیت Position می توانید تصمیم بگیرید که آیا امکان عنصر نسبت به Flow صفحه تعیین می شود یا اینکه در عین حالی که جایگاهش در Flow حفظ می شود، مکان آن تغییر کند و یا اینکه مکان آن را نسبت به یکی از عناصر اجدادش تعیین کنید. به طور کلی، خصوصیات مربوط به موقعیت در CSS به شما اجازه می دهند تا موقعیت یک عنصر را تغیر داده و یا مکان یک عنصر را پشت دیگر عناصر قرار دهید و یا مشخص کنید زمانی که محتوای یک عنصر خیلی بزرگ شد، چه اتفاقی بیفتد.

بررسی انواع پوزیشن ها در CSS 

همانطور که گفته شد پس از آموزش کار با margin، خاصیت Position در زبان برنامه نویسی CSS یکی از قابلیت های بسیار مهم در استایل دهی است که اگر با کدنویسیHTML CSS سروکار دارید، حتما باید آن را بلد باشید. با استفاده از خاصیت پوزیشن در CSS می توانید محل قرارگیری یک عنصر را در صفحه مشخص کنید. این ویژگی می تواند چهار مقدار داشته باشد که انواع پوزیشن ها در CSS عبارت هستند از:

• Relative: با استفاده از این پوزیشن شما می توانید یک المان را بدون اینکه روی المان دیگر تاثیر بگذارد، مکان آن را تغییر دهید و به سمت هر کدام از جهت های مختلف جابجا کنید.

• Fixed: این پوزیشن یکی از خاصیت های پرکاربرد در CSS است که برای ساخت هدرها و منوهای با موقعیت فیکس مورد استفاده قرار می گیرد.

• Sticky: این خاصیت المان در بخشی از صفحه با موقعیت استاتیک قرار می گیرد و بعد از اسکرول کردن صفحه این المان به پوزیشن Fixed تغییر حالت داده و در مکان خود ثابت می شود.

• Static: آخرین مورد از خاصیت های پوزیشن در CSS، پوزیشن Static است. به صورت پیش فرض المان های روی یک صفحه در موقعیت استاتیک قرار دارند.

جمع بندی و نتیجه:

ما خواستیم در این مطلب، توضیحاتی در مورد Position در CSS برای شما ارائه کنیم و به بررسی انواع پوزیشن ها در CSS بپردازیم. همانطور که گفته شد، با استفاده از Position در زبان CSS می توان موقعیت قرارگیری یک تگ را در صفحه مشخص تعریف کرد. اگر می خواهید نحوه کار با پوزیشن ها را در CSS یاد بگیرید، توصیه می کنیم تا در دوره آموزش CSS شرکت کنید.