آموزش طراحی قالب وب سایت – جلسه پنجم

بوسیله میثم همتی در فروردین ۱, ۱۴۰۲

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 آن نیست

میانگین امتیازات ۵ از ۵

از مجموع ۱ رای

آموزش طراحی قالب وب سایت – جلسه پنجم

مطالب مرتبط: