آموزش HTML و CSS آموزش خاصیت position در CSS | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

بنام خدا سلام ,

موقعیت عناصر در صفحه

یکی از ویژگیهای دیگری که در css وجود دارد،
امکان موقعیت دهی به عناصر موجود در یک صفحه است.
با استفاده از این مشخصه میتوانید یک عنصر را در یک نقطه از صفحه به طور ثابت قرار دهید
یا عناصر را نسبت به یکدیگر تنظیم کنید و آنها را روی هم بیاندازید.
عناصر موجود در صفحه در چهار جهت اصلی بالا ( top ) ، پایین (  bottom ) ، راست ( right ) و چپ ( left ) جهت دهی میشوند ولی تا زمانی که مشخصه ی position را استفاده نکرده باشید، این جهت دهی بی اثر خواهد بود. به طور کلی چهار روش برای استفاده از ویژگی موقعیت دهی در اختیار دارید که در ادامه به آنها خواهیم پرداخت.

موقعیت دهی استاتیک (Static Positioning)

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

موقعیت دهی استاتیک (Static Positioning)

مثال:

اگر عنصر والد مقدار absolute را داشته باش ، عنصر فرزند هم مقدار inherit را داشته باشد مقدار absolute را از عنصر والد به ارث می برد.

بیشتر بخوانید :
آموزش css آموزش ویژگی overflow در css | پاسخ وردپرس |

خاصیت های bottom , left , right , top شامل موارد زیر می باشد.

قبل از استفاده از مقادیر باید خاصیت position را استفاده کنید ،البته برای کار با این خاصیت ها به صورت معمولی از position با مقادیر relative استفاده می کنیم.

[checklist]

  • top : این مقدار فاصله عنصر را از بالا تنظیم می کند.
  • Right : این مقدار فاصله عنصر را از راست تنظیم می کند.
  • bottom : این مقدار فاصله عنصر را از پایین تنظیم می کند.
  • left : این مقدار فاصله عنصر را از چپ تنظیم می کند.

[/checklist]

کد css

کد Html:

آموزش postion در css

خاصیت position شامل موارد زیر است :

static :

در صورت استفاده از این مقدار حالت پیش فرض مرور گر را لحاظ می کنیم، مقدار خود position را خنثی می کند.

بیشتر بخوانید :
آموزش html و css آشنایی با box-sizing در CSS جلسه 13 | پاسخ وردپرس |

relative :

این مقدار زمانی استفاده میشود که بخواهید خواصیت های bottom و left و right را بکار ببریم و همچنین این مقدار را برای عنصر والد ، عنصر فرزند قرار دهید که مقدار position ان عنصر فرزند absolute باشد.

Absolute :

زمانی که از این مقدار استفاده می کنید، عنصر در گوشه کادر عنصر والد قرار می گیرد ( عنصر والدی که مقدار Relative را داشته باشد) در صورتی که عناصر والد آن خاصیت position و یا مقدار Relative را نداشته باشد ، عنصر مورد نظر body را عنصر والد در نظر میگیرد. همچنین عنصری که مقدار absolute را دارد روی همه ی عناصر قرار میگیرد.

اگر چند عنصر این مقدار را داشته باشند با z-index ترتیب قرار گیری عناصر روی هم را تعیین می کنید.

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

initial : مقدار پیش فرض مرورگر است.

inherit : در صورت استفاده از این مقدار مرورگر مقدار عنصر والد را به عنصر فرزند اختصاص می دهد.

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

بیشتر بخوانید :
آموزش html و css طراحی باکس نرم افزار های مورد نیاز | پاسخ وردپرس |

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *