در ادامه آموزش های css در این جلسه از توکاپس قصد داریم تا با خصوصیت position در css آشنا شویم. این خصوصیت یکی از پرکاربردترین خصوصیات در CSS می باشد. با ما همراه باشید.

خصوصیت Position در CSS :

یکی از ویژگی های مهم عناصر HTML  “موقعیت مکانی”  آنها در صفحه می باشد.

برای تعیین موقیعت مکانی یا position عناصر در صفحه وب از خصوصیت position در CSS استفاده می کنیم.  مقدارهایی که position در css دارد به شرح زیر است که در ادامه به توضیح آن ها می پردازیم.
• static
• fixed
• relative
• absolute

مقدار static برای position :

موقعیت مکانی یا position کلیه عناصر درhtml به صورت پیشفرض درحالت static  است و این بدان معناست که مکان عناصر همانگونه که در صفحه تعریف شده اند تعیین و نمایش داده می شود. در حالت پیشفرض یا static شما قادر به تعیین مکان برای عناصر از طریق ۴ جهت اصلی یا خصوصیات  top,right,bottom,left نیستید.

مقدار fixed برای position :

برای اینکه عنصری در صفحه ثابت شود و با بالا و پایین رفتن صفحه (اسکرول) مکان آن تغییری نکند کافیست مقدار position آن را برابر fixed قرار دهید. توجه داشته باشید که با تعیین مقدار fixed مکان عنصر مورد نظر به بالا و گوشه مرورگر تغییر وضعیت می دهد و ثابت می شود و برای تعیین مکان دقیق آن می توایند از خصوصیات  top,right,bottom,left استفاده نمایید.
البته عناصری که position آنها با fixed مقداردهی می شود توسط عناصر دیگر نادیده گرفته میشوند و شما می توانید بدون در نظر گرفتن DOM تگ های مربوطه را در بالا یا پایین یا هر جای دلخواه دیگر از صفحه به کار ببرید.
در مثال زیر یک تگ div را در صفحه ثابت می کنیم و از بالا ۵۰  پیکسل و از چپ صفحه ۲۰ پیکسل جابه جا می کنیم.

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه سوم :فرمت دهی جداول در css

مقدار relative برای  position :

اگر مقدار position یک عنصر را برابر relative (نسبی) مقداردهی  کنید ، موقعیت عنصر مورد نظر ((نسبت)) به مکان فعلی عنصر و با توجه به خصوصیات top,right,bottom.left تعیین می شود. معمولا از عناصری که با موقعیت مکانی relative مقدار دهی شده اند به عنوان بلاکی حامل برای فرزندانی که با مقدار absolute یا مطلق مقدار دهی شده اند به کار می رود.

مقدار absolute برای  position :

اگر مقدار absolute (مطلق) را برای position یک عنصر انتخاب کنید، عنصر مورد نظر نسبت به والد خود که موقعیت relative یا غیر از static دارد تغییر وضعیت می دهد. اگر عنصر والدی با موقعیت relative برای عنصر مورد نظر پیدا نشود، عنصر مورد نظر به گوشه و بالای مروگر تغییر مکان می دهد و سپس مکان دقیق آن با توجه به خصوصیات top,right,bottom.left  تعیین می شود.

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

دسته‌ها: آموزش css

غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

دیدگاهتان را بنویسید

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