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 را نشان میدهد :

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>

</head>

<style>
     @import url("reset.css");

     .outerDiv{ border: 1px solid #000;}
     .headerDiv{   
          width:1100px; 
          height:145px; 
          position:relative 
     }  
     div.headerDiv ul 
     {
          border: 1px solid red;
          width: 600px;
          position: absolute ;
          bottom:0px;
          right: 10px;

     }
</style> 

<body>


     <div class="outerDiv">
          <div class="headerDiv">
               <ul>
                <li><a href="#"> خانه </a></li>
                <li><a href="#">نمونه کارها </a></li>

           </ul>
      </div>
 </div>
</body>
</body>
</html>

 

نکته : به جای 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   استفاده میشود

 

 

<body>
<div>
	<div>

		<ul style="position:relative">
			<li>  </li>
			<li>  </li>

		</ul>

		<ul style="position:absolute">

		</ul>
	</div>

</div>
</body>

 

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

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

 

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

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

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

5 × 2 =