html-css CSS position تعیین موقعیت

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

تعیین موقعیت عناصر در صفحه باچهار مقدار top , right , bottom , left و روش های ( absolute , relative , fixed ) انجام میگیرد

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

 
تعیین موقعیت مطلق ( Absolute Positioning ) :
یک عنصر با نوع موقعیت مطلق ( absolute ) از جریان طبیعی صفحه خارج خواهد شد . این عناصر نسبت به اولین عنصر پدر خود ( parent ) که دارای خاصیت relative تغییر موقعیت خواهند داد . اگر هیچ پدر نداشت که خاصیت relative داشته باشد از المنت body موقعیت میگیرد ..
مثال زیر برای قرار دادن منو در بخش head سایت است که نحوه ارتباط ul و div را نشان میدهد :

 

نکته : به جای position میتوان از margin نیز استفاده کرد ، اما position دقیق تر است

نکته : برای کنترل و نحوه قرار گیری و اولویت در قرارگیری این عناصر بر روی یکدیگر از مقدار z-index استفاده می شود . چند عنصر می توانند به صورت همزمان بر روی یکدیگر قرار گیرند و با تعیین مقدار z-index می توان اولویت در قرار گیری این عناصر را تعیین نمود . عناصر با z-index بیشتر نسبت به عناصر با مقدار z-index کمتر بالاتر قرار خواهند گرفت . این عناصر مانند چند لایه بر روی یکدیگر قرار خواهند گرفت .

 

نکته : 2 روش کلی برای جا به جا کردن اشیا در صفحه است :

 

1-    با استفاده از margin  و padding

2-    با استفاده از position

———————-

مفهوم آدرسی نسبی و مطلق :

مثلا کسی تو خیابان امیرآباد است میخواد بره رسالت

آدرس مطلق ( absolute ) :  آسیا – ایران – تهران – سمت شرق  –  رسالت

آدرس نسبی ( relative) : آدرس نسبی : شرق – رسالت

 

نکته در مورد position در css  :

روش اول : تر کیب absolute  و  relative با هم

وقتی به یم آیتم موقعیت absolute  مدهیم نسبیت به نزدیکترین parent خود که relative  است

توسط سوییچ های Top , Button , left , Right  جا به جا میشود

یعنی یک پرنت relative  تعینن میکنیم و سپس به آیتم که میخواهیم جابه جا شود absolute مدهیم

 

روش دوم : استفاده فقط از relative

یعنی آیتم نسبت به همان جایی که هست تغییر میکند مثلا میگوییم نسبت به جایی که هستی 2 پیکسل برو بالاتر و …

 

از  z-index هم برای اینکه تعیین کنیم کدام آیتم بالا باشد و کدام پایین با سویچ 0 و 1

نکته :

از مقادیر منفی نیز در سوییچ های Top , Button , left , Right   استفاده میشود

 

 

 

نکته 1 : در کد فوق المنت ul که خاصیت absolute گرفته نسبت به body جا به جا میشود

و نسبت به ul بالای خود که خاصیت relative دارد جا به جا نمی شود چون parent آن نیست

 

Like
0

دسته بندی‌ها: htm - CSS,آموزش,طراحی وب

برچسب‌ها : <<,>>

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