انجمن برنامه نویسان البرز

تبلیغات

استفاده از Css Position یا همان موقعیت دهی به عناصر

استفاده از Css Position یا همان موقعیت دهی به عناصر


سلام با جلسه ی بعدی از بحث آموزش طراحی سایت در خدمت شما عزیزان هستیم امروز میخواهیم نحوه ی استفاده از CSS Position رو به شما عزیزان آموزش بدهیم. Css Position ها از جمله عناصر مهم و پر کاربرد در CSS میباشند که به کارگیری درست و به موقع آن میتواند در بسیاری از مواقع حلال مشکلات ما باشد. به طور کلی ۳ نوع CSS Position وجود دارد ( البته از نوع چهارم که position Static میباشد و به صورت پیش فرض به عناصر داده میشود صرفنظر کردیم) این ۳ نوع عبارتند از :

  • Fixed
  • Absolute
  • Relative

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

See the Pen Rgvyab by Ehsan (@Ehsan-sabouie) on CodePen.


همانطور که مشاهده میکنید عنصر به طور ثابت در صفحه قرار گرفت و تحت هیچ شرایطی از جای خود تکان نخورد.
CSS Position بعدی که میخواهیم در مورد آن صحبت کنیم Absolute میباشد. این position به صورت پیشفرض روی عناصر موجود دیگر قرار میگیرد گویا میخواهیم چیزی را روی چیز دیگری بگذاریم مثلا یک ساعت را روی یک میز و خوب همانطور که انتظار میرود وقتی ساعتی روی میز قرار میگیر آن قسمت از روی میز که ساعت روی آن است دیده نمیشود. Absilute در CSS دقیقا همین رفتار را داراست و به صورت پیش فرض نسبت به گوشه ی سمت چپ Browser تغییر مکان میدهد به مثال زیر توجه کنید :

See the Pen ZywRWP by Ehsan (@Ehsan-sabouie) on CodePen.


همانطور که مشاهده میکنید عنصر Position Absolute نسبت به گوشه ی سمت چپ تصویر قرار گرفته و از آنجا به مقدار ۲۰px با استفاده از خصیصه ی top و ۸۰px با استفاده از خصیصه ی left پایین و به سمت راست حرکت کرده است. بدیهی است که میتوان از مقادیر right و bottom نیز برای جایگذاری درست بهره برد.
اما سوال اینجاست که اگر ما بخواهیم عنصر از جایی مشخص شروع به حرکت کند و نسبت به گوشه ی سمت راست حرکت نکند باید چه کاری انجام بدهیم؟!
در اینجا میتوانیم به عنصر والد عنصری که میخواهیم به آن absolute بدهیم ، position Relative داده و در حقیقت نقطه ی حرکت مختصاتی را بر روی عنصری که دارای relative میباشد قرار بدهیم. ( چقدر سخت شد نه؟ خیلی سادس فقط به مثال زیر توجه کنید: )

See the Pen bRzKLx by Ehsan (@Ehsan-sabouie) on CodePen.


همانطور که مشاهده میکنید این بار position absolute( عنصر آبی رنگ) نسبت به والد خود (عنصر قرمز رنگ) مقادیر top و left را دریافت کرد در حقیقت مرکز مختصات ما این بار گوشه ی سمت چپ تصویر نبود بلکه گوشه ی سمت چپ عنصر قرمز رنگ بود.
و اما آخرین نکته در رابطه با CSS Position ها و درس امروز ما استفاده از Position Relative میباشد که با یکی از کاربردهاش در مرحله ی قبل آشنا شدیم. و اما این خصوصیت این امکان را به ما میدهد تا عنصر موجود را نسبت به موقعیت فعلی خود یا به عبارت دیگر مکان فعلی خود جا به جا کنیم به مثال زیر توجه کنید : عنصر ۱۰۰px از بالا و ۱۰۰px از چپ margin گرفته است و میخواهیم آن را نسبت به همین موقعیت مقداری جا به جا کنیم. به مثال زیر توجه کنید:

See the Pen weNxwN by Ehsan (@Ehsan-sabouie) on CodePen.


همانطور که مشاهده میکنید فضای خالی سمت چپ کمتر از margin 100px و فضای خالی بالا بیشتر از margin 100px میباشد این بدان دلیل است که عنصر را با استفاده از position relative و مقادیر top و left جا به جا کردیم و این جا به جایی نسبت به موقعیت فعلی عنصر بود ( یعنی با احتساب مقادیر margin ) . به عبارت دیگر جا به جایی نسبت به گوشه ی سمت چپ Browser یا عنصر والد صورت نگرفت.
خوب به پایان جلسه ی امروز رسیدیم سعی کرم مطلب را به زبانی بسیار ساده بیان کنم .
موفق باشید.




کلمات کلیدی :

نظر بدهید