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

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

     

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    ارسال یک پاسخ

    آدرس ایمیل شما منتشر نخواهد شد.

    این سایت توسط reCAPTCHA و گوگل محافظت می‌شود حریم خصوصی و شرایط استفاده از خدمات اعمال.

    The reCAPTCHA verification period has expired. Please reload the page.