با سلام خدمت شما کاربر محترم کانال وبسایت آموزr من علیرضا حاتمی نیا هستم با آموزشی دیگر از سری آموزش های طراحی وب در خدمت شما هستم.
در این جلسه قصد داریم تا با خصوصیت position در css آشنا شویم. این خصوصیت یکی از پرکاربردترین خصوصیات در CSS می باشد.
خصوصیت Position در CSS :
یکی از ویژگی های مهم عناصر HTML "موقعیت مکانی" آنها در صفحه می باشد. برای تعیین موقیعت مکانی یا position عناصر در صفحه وب از خصوصیت position در CSS استفاده می کنیم. مقدارهایی که position در css دارد به شرح زیر است که در ادامه به توضیح آن ها می پردازیم.
• static
• fixed
• relative
• absolute
مقدار static برای position :
موقعیت مکانی یا position کلیه عناصر درhtml به صورت پیشفرض درحالت static میباشد و این بدان معناست که مکان عناصر همانگونه که در صفحه تعریف شده اند تعیین و نمایش داده می شود. در حالت پیشفرض یا static شما قادر به تعیین مکان برای عناصر از طریق 4 جهت اصلی یا خصوصیات top,right,bottom,left نیستید.
مقدار fixed برای position :
برای اینکه عنصری در صفحه ثابت شود و با بالا و پایین رفتن صفحه (اسکرول) مکان آن تغییری نکند کافیست مقدار position آن را برابر fixed قرار دهید. تو جه داشته باشید که با تعیین مقدار fixed مکان عنصر مورد نظر به بالا و گوشه مرورگر تغییر وضعیت می دهد و ثابت می شود و برای تعیین مکان دقیق آن می توایند از خصوصیات top,right,bottom,left استفاده نمایید.
نکته حائز اهمیت دیگر این است : عناصری که position آنها با fixed مقداردهی می شود توسط عناصر دیگر نادیده گرفته میشوند و شما می توانید بدون در نظر گرفتن DOM تگ های مربوطه را در بالا یا پایین یا هر جای دلخواه دیگر از صفحه به کار ببرید.
در مثال زیر یک تگ div را در صفحه ثابت می کنیم و از بالا 50 پیکسل و از چپ صفحه 20 پیکسل جابه جا می کنیم.
div { position: fixed; top:50px; left:20px; }
مقدار relative برای position :
اگر مقدار position یک عنصر را برابر relative (نسبی) مقداردهی کنید ، موقعیت عنصر مورد نظر ((نسبت)) به مکان فعلی عنصر و با توجه به خصوصیات top,right,bottom.left تعیین می شود. معمولا از عناصری که با موقعیت مکانی relative مقدار دهی شده اند به عنوان بلاکی حامل برای فرزندانی که با مقدار absolute یا مطلق مقدار دهی شده اند به کار می رود.
div1{ position:relative; left:50px; } div2{ position: relative; top:20px; }
مقدار absolute برای position :
اگر مقدار absolute (مطلق) را برای position یک عنصر انتخاب کنید، عنصر مورد نظر نسبت به والد خود که موقعیت relative یا غیر از static دارد تغییر وضعیت می دهد. اگر عنصر والدی با موقعیت relative برای عنصر مورد نظر پیدا نشود، عنصر مورد نظر به گوشه و بالای مروگر تغییر مکان می دهد و سپس مکان دقیق آن با توجه به خصوصیات top,right,bottom.left تعیین می شود.
div1 { position: absolute; left:200px; top: 50px; }
