position در CSS

css به شما کمک می کنه تا موقعیت المنت هاتون رو مشخص کنین. شما میتونین هر المنتی رو در هر موقعیتی که میخواین قرار بدین. شما میتونین مشخص کنین که المنت شما موفعیت نسبی (relative ) داره یا اینکه موقعیتش طبیعیه یا کاملا بر اساس عنصر والد خودشه(absolute ) .

حالا ما تمام ویژگی های مربوط به موقعیت در CSS رو خواهیم دید به همراه مثال هاشون :

Relative :

Relative موقعیت المنت رو تغییر میده به جایی که به صورت نرمال نمایش داده میشه . پس left :20  بیست پیکسل به سمت چپ المنت اضافه میکنه .

شما میتونین از ۲ مقدار top , left با هم استفاده کنین به همراه ویژگی position تا هر یک المنت رو هر جایی که میخواین حرکت بدین .

این هم یک مثال :

<html>
   <head>
   </head>
   <body>
      <div style="position:absolute; left:80px; top:20px; background-color:yellow;">
یک div با موقعیت absolute
</div>
   </body>
</html>

 Fixed :

موقعیت fixed این امکان رو میده تا یک المنت رو در یک مکان مشخص در صفحه فیکس کنین ، بدون توجه به اسکرول . مختصات مشخص شده به نسبت صفحه مرورگر خواهد بود.

شما اینجا هم باید با مقدار دادن به top . left مختصات المنت رو مشخص کنین .

<html>
   <head>
   </head>
   <body>
      <div style="position:fixed; left:80px; top:20px; background-color:yellow;">
      یک المنت ثابت.
      </div>
   </body>
</html>

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *