ویژگی position

ساعت : ۱۸:۰۶

تاریخ : ۱۱ اسفند ۱۳۹۷

ویژگی position چیست و مقادیر Absolute و Relative چگونه عمل می کنند؟

ویژگی position یکی از ویژگی های css است که برای تعیین موقعیت عنصر در صفحه وب مورد استفاده قرار می گیرد. این ویژگی دو مقدار مهم با نام های Absolute و Relative دارد که هر کدام در موارد خاصی استفاده می شوند. در این مقاله از سری مقاله های آموزش css به معرفی ویژگی position و دو مقدار مورد استفاده در آن می پردازیم. در آخر نیز به مقایسه این دو مقدار می پردازیم و تفاوت آن ها را بیان می کنیم.

ویژگی position در css

ویژگی position چیست؟

ویژگی position یکی از ویژگی های مهم css است که کاربرد زیادی در طراحی وب دارد. با استفاده از این ویژگی شما می توانید موقعیت عناصر را در صفحه نسبت به مکان های مختلف در صفحه مشخص کنید. برای مثال شما می توانید موقعیت عنصر مورد نظر خود را نسبت به صفحه وب در نظر بگیرید یا اینکه موقعیت آن را نسبت به عنصر پدرش در صفحه مشخص کنید. این ویژگی مقادیر زیادی دارد که هر کدام برای موارد خاصی استفاده می شوند ولی دو مورد از مهمترین مقادیر آن absolute و relative هستند که نسبت به سایر مقادیر استفاده بیشتری دارند.

مقدار relative برای ویژگی position

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


div {
Position: relative;
Left:10px;
Top:5px;
 }

زمانی که کدهای بالا را برای یکی از عناصر div صفحه وب خود مورد استفاده قرار دهید، مکان عنصر مورد نظر نسبت به مکان اولیه خودش ۱۰ پیکسل به سمت راست و ۵ پیکسل به سمت پایین حرکت می کند. کاربرد دیگر این مقدار این است که زمانی که می خواهید فرزندان یک عنصر را نسبت به خود آن عنصر جابجا کنید، به آن عنصر مقدار relative را می دهید و به فرزندی که می خواهد نسبت به آن جابجا شود مقدار absolute را می دهید.

ویژگی position در css

مقدار absolute برای ویژگی position

زمانی که مقدار absolute را به ویژگی پوزیشن یک عنصر بدهید، می توانید عنصر را نسبت به اولین عنصر پدری که مقدار relative دارد جابجا کنید. اگر هیچ کدام از عناصر پدر این عنصر مقدار relative را نداشته باشند، عنصر نسبت به کل صفحه یا همان عنصر body تغییر موقعیت می دهد. برای درک بهتر این موضوع به مثال زیر توجه کنید :


div {
position: absolute;
right:5px;
top:5px;
}

در این مثال عنصر div مقدار absolute را برای خاصیت position خود گرفته است. به همین دلیل به عناصر پدر خود نگاه می کند تا اولین پدری که مقدار خاصیت position آن relative است را پیدا کند. اگر این عنصر را پیدا کند، موقعیت آن را به عنوان مبدا در نظر گرفته و سپس ۵ پیکسل به سمت چپ و ۵ پیکسل به سمت پایین جابجا می شود. اگر هیچ پدری با مقدار relative پیدا نکند، این جابجایی را نسبت به کل صفحه انجام می دهد.

ویژگی position در css

تفاوت absolute و relative

ین دو مقدار به شما اجازه می دهند که در زمان هایی که نیاز دارید، موقعیت عناصر به همدیگر یا عنصر پدرشان جابجا کنید. نکته مهمی که در اینجا وجود دارد این است که اگر برای یک عنصر از مقدار relative استفاده کنید، عنصر جایگاه قبلی خود را در flow حفظ خواهد کرد. در حالی اگر عنصری مقدار absolute را بگیرد، عنصر از حالت flow خود خارج خواهد شد و جایگاه آن در صفحه تغییر می کند.



  • ویژگی position
    نام نویسنده : میلاد احمدی نیا
  • ویژگی position
    نام نویسنده : رضا ابولحسن زاده
  • ویژگی position
    نام نویسنده : رضا ابولحسن زاده
  • ویژگی position
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس front-end و کارشناس فناوری اطلاعات

پاسخی بگذارید

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