42
تشکر

نحوه استفاده از Absolute در CSS

CSS

CSS

در مورده استفاده از خاصیت absolute برای بعضی از طراحان وب سردرگمی هایی وجود دارد. برای مثال زمانی که شما یک عنصر با خاصیت absolute را تعریف میکنید و با استفاده از خاصیت های top و left به آن مختصات میدهید مقادیر top و left بر اساس کل صفحه تعیین میشوند نه بر اساس عنصر والد که این کار در رزولویشن های دیگر به باعث بوجود آمدن مشکل میشود.

نحوه استفاده از خاصیت absolute به این ترتیب است که یک عنصر با خاصیت absolute باید درون یک عنصر با خاصیت relative قرار بگیرد.

 یعنی والد باید دارای کد:

position: relative;

و فرزند دارای کد:

position: absolute;

باشد.

در واقع یک عنصر با پوزیشن relative به شما امکان کنترل عنصرهای با پوزیشن absolute درون خود را میدهد.

در عکس زیر عنصر والد دارای پوزیشن relative است و فرزندانش دارای پوزیشن absolute هستند. میبینید که مقدارهای top و left بر اساس عنصر والد تنظیم میشوند.

پوزیشن ها در CSS

پوزیشن ها در CSS

اما در عکس زیر عنصر والد دارای پوزیشن static (که به صورت پیشفرض برای همه عناصر انتخاب میشود) است و فرزندانش که دارای پوزیشن absolute هستند, مقدارهای top و left آنها بر اساس کل صفحه تنظیم میشود.

پوزیشن ها در CSS

پوزیشن ها در CSS

زمانی که شما پوزیشن یک عنصر را برابر absolute میکنید میتوانید آن عنصر را در تمام صفحه بدون اینکه بر روی عناصر دیگر تاثیری داشته باشد حرکت دهید. واقعا خاصیت مهمی است.

 

  • Amin می‌گه:

    ممنون بابت توضیح مختصر و جامع تون

  • رضا می‌گه:

    سلام
    خیلی ممنون
    واقعا آموزش خوبی بود واقعا عالی بیان کردید

  • پوریا می‌گه:

    سلام خسته نباشید می خواستم ببینم اگه من بخوام یک عکس تو صفحه ایجاد کنم و زمانی که رفتم روی عکس ، یک کادر بر روی آن باز شود و توضیحاتی در مورد آن بدهد ، چیکار کنم.گیج شدم باور کنید.از absolute استفاده می کنم ، اما نمیدونم چظوری والد اون یکی دیگه بکنم

  • سارا می‌گه:

    سلام ممنون از مطلب خوبتون، ولی من نمی تونم margin-right رو بهش اعمال کنم یعنی margin-left کار می کنه اما راست نه! راه حل چیه؟ به محض اینکه از حالت Absulate خارج میکنم درست میشه!

  • آروین می‌گه:

    واااااااااااااااااااااااااااااااااااااااااااقعا ممممممممممممممممممممممممممممممنوووووووووووووون خیلی دنبالش بودم!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • saman می‌گه:

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

  • کریمیان می‌گه:

    مطلب خیلی مفید و کاربردی بود،ممنون


  • نظرات این مطلب بسته است.