نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3646
تاریخ بروزرسانی ۴ اردیبهشت ۱۴۰۱

آموزش پوزیشن ها در CSS

آموزش انواع پوزیشن در CSS

همان طور که می‌دانید برای تعیین موقعیت دقیق المان های html در صفحه وب از css استفاده می شود؛ اما گاهی در استفاده درست از پوزیشن ها در css دچار اشتباه می شویم و سردرگم می مانیم. تیم طراحی سایت اصفهان وب یار در این مقاله سعی در پرداختن به توضیح هر کدام از پوزیشن های css و کاربرد آن ها داشته است که امیدواریم نظر شما عزیزان را جلب کند؛ با ما همراه باشید.

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

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

انواع position در css

  • 1- static
  • 2- relative
  • 3- absolute
  • 4- fixed
  • 5- sticky

 

پوزیشن استاتیک (Static Position)

عناصر با این پوزیشن، قابل جابجایی نیستند. این پوزیشن که به صورت پیش فرض به تمام المان های صفحه اعمال می شود برای تعیین موقعیت طبیعی هر عنصر html به کار می رود. برای مثال سه div زیر را در نظر بگیرید:

HTML:

CSS:

 

نظم طبیعی صفحه از ترتیب تگ های html پیروی کرده و ایجاب می کند که ابتدا d1 قرار بگیرد، بعد از آن d2 می آید و سپس d3 در زیر d2 موقعیت دهی می شود. خروجی کد فوق به همراه مقداری استایل دهی به شکل زیر خواهد شد:

پوزیشن ها در css - استاتیک

پوزیشن ها در css – استاتیک (static)

 

نکته ها:

– اگر دقت کرده باشید ما در هیچ کدام از کدهای css خود از پوزیشن استفاده نکردیم زیرا به صورت پیش فرض، پوزیشن همه المان ها استاتیک است؛ یعنی نوشتن کد زیر یا ننوشتن آن تفاوتی ندارد.

– همانطور که در خروجی html مشاهده کردید، هر المانی که به شکل استاتیک پوزیشن دهی شده باشد، تمام عرض ممکن از صفحه را در بر می‌گیرد؛ مگر آن که از طرف Parent (پدر، والد یا جد) خود یا با دادن مقدار مشخصی به خاصیت width محدود شود.

– المان های با پوزیشن استاتیک، مقادیر top/bottom و left/right را نمی‌پذیرند. برای حل محدودیت فوق پوزیشن نسبی ساخته‌ شد که در ادامه می خوانید.

پوزیشن نسبی (Relative Position)

المان های با پوزیشن نسبی،  تمام خواص استاتیک بودن را دارند، به علاوه آنکه می‌توانند خاصیت های top/bottom و left/right را هم بگیرند. موقعیت عناصری که relative هستند، نسبت به حالتی که استاتیک باشند تنظیم می گردد. برای نمونه در مثال زیر می بینید که موقعیت d2 با top:10px و left:80px نسبت به گوشه پایین و سمت چپ d1 تنظیم شده است:

پوزیشن ها در css - نسبی (relative)

پوزیشن ها در css – نسبی (relative)

 

نکته ها:

– در حالت نسبی هم مانند استاتیک، عرض المان ها تا حد ممکن تمام فضای موجود را از آن خود می‌کند.
– برای اینکه d2 را بالاتر ببریم مثلاً بخواهیم از بالای صفحه به اندازه 10px فاصله داشته باشد باید محاسبه کنیم ارتفاع d1 چقدر است بعد 10 پیکسل از آن کم کنیم و حاصل را به صورت منفی به خاصیت top بدهیم:

پوزیشن ها در css - نسبی (relative)

پوزیشن ها در css – نسبی (relative)

 

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

 

پوزیشن آزاد (Absolute Position)

المان های دارای این پوزیشن، نسبت به اولین جدی که پوزیشن غیر استاتیک دارد موقعیت دهی می شوند و در صورتی که چنین جدی یافت نشد، موقعیتشان نسبت به کل داکیومنت و به شکل آزاد (absolute) تنظیم می شود. به مثال زیر دقت کنید:

HTML:

 

CSS:

پوزیشن ها در css - آزاد (absolute)

پوزیشن ها در css – آزاد (absolute)

 

چند نکته مهم در باره پوزیشن آزاد:

– اگر دقت کرده باشید متوجه شده اید که d3 نسبت به d2 تنظیم شده است؛ زیرا d2 اولین جد d3 است که پوزیشنی غیر از استاتیک دارد. اما d2 نسبت به کل داکیومنت تنظیم شده است.

– برخلاف پوزیشن های استاتیک و نسبی، درحالت عادی، عرض المان های دارای پوزیشن آزاد، به اندازه محتوای آن ها (بعلاوه padding و border) فضا اشغال می کند. هر کدام از پوزیشن ها اگر محتوایی نداشته باشند و مقادیر padding یا border و یا width برایشان ست نشده باشد، در صفحه وب اثری از آن ها دیده نخواهد شد.

– عناصر دارای پوزیشن آزاد در صورتی که خاصیت های top/bottom  و left/right برایشان ست نشده باشد، مانند حالت استاتیک موقعیت دهی می شوند.

پوزیشن ثابت (Fixed Position)

همانطور که از نامش پیداست، برای تعیین جایگاه ثابت المان ها به کار می‌رود و حتماً باید مقادیر top/bottom و left/right  برایش تعریف شود. این پوزیشن کاملاً آزاد است یعنی آن محدودیت پوزیشن آزاد را هم که نسبت به جد غیر استاتیک خود موقعیت دهی می‌شد، ندارد و تنها نسبت به صفحه مرورگر تنظیم می شود. برای مثال دکمه رفتن به بالای سایت را پوزیشن ثابت می دهند:

 

پوزیشن چسبنده (Sticky Position)

ترکیبی از دو پوزیشن نسبی و ثابت می باشد؛ چنین المانی با اسکرول کردن صفحه به سمت پایین به سقف مرورگر می چسبد (تا قبل از چسبیدن، پوزیشن نسبی دارد) و با اسکرول کردن بیشتر، همان جا ثابت می ماند (پوزیشن ثابت می گیرد). این نوع پوزیشن بیشتر برای منوها کاربرد دارد.

امیدواریم خواندن این مقاله به شفاف سازی و ابهام زدایی از ذهن شما همراهان همیشگی وب یار کمک کرده باشد؛ ما را با نظرات گرم خود خوشحال کنید.

 

به روز و پیروز باشید!

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.

    فرشید

    مرداد ۱۳, ۱۳۹۸پاسخ

    مفید و مختصر بدون توضیحات اضافی و گیج کننده
    عالی بود

    میم

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

    الهام

    وااای مرسی واقعا کلی سرچ کردم نفهمیدم این مبحث رو شما بی نظریین

    محمد

    سلام خیلی عالی بود و متوجه شدم
    تشکر