تعیین موقعیت قرارگیری عناصر توسط دستور Position

توسط position می توان موقعیت یک عنصر را در صفحه تعیین نمود. این خاصیت بسیار مهم و پر کاربردی بوده و بسیاری از افکت های زیبا در صفحات وب به واسطه این خاصیت امکان پذیر است اما اگر نکات مربوط به استفاده از آن را رعایت نکنید ممکن است چیدمان عناصر موجود در صفحه وب، به کلی بهم بریزند.

نحوه استفاده

قبل از ارائه توضیحات در مورد position لازم است مواردی را شرح دهیم که مارا مجبور به استفاده از position می کنند. برای شروع سه div با عرض 300 و ارتفاع 150 در صفحه ایجاد کنید و به هریک رنگ مختلفی اختصاص دهید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      *{margin: 0px;padding: 0px;}
      .box{
        width: 300px;
        height: 150px;
      }
      #purple{
        background-color: purple;
      }
      #teal{
        background-color: teal;
      }
      #tomato{
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div id="purple" class="box"></div>
    <div id="teal" class="box"></div>
    <div id="tomato" class="box"></div>
  </body>
</html>

نتیجه اجرای کدهای فوق به شکل زیر خواهد بود.

پوزیشن ها در css

در این مثال فاصله کادرها از بالای صفحه به ترتیب زیر خواهند بود.

  • purple:  فاصله از بالای صفحه 0 پیکسل.
  • teal: فاصله از بالای صفحه 150 پیکسل زیرا ارتفاع کادر بالاتر خود که purple می باشد 150 است.
  • tomato: فاصله از بالای صفحه 300 پیکسل بخاط ارتفاع دو کادر بالاتر خود.

حال تنظیماتی انجام دهید که کادر teal 100 پیکسل از کادر بالاتر خود یعنی purple فاصله بگیرد بدون اینکه موقعیت کادر tomato تغییر کند.

اگر با استفاده از margin قصد داشته باشید فاصله مورد نظر را ایجاد کنید با مشکل زیر مواجه خواهید شد.

#teal{
  background-color: teal;
  margin-top: 100px;
}

ایجاد فاصله با margin

با آنکه 100 پیکسل فاصله بین کادرهای teal و purple ایجاد شده است، اما این فاصله موجب تغییر موقعیت اولیه کادر tomato نیز شده است در اصل این کادر هم به 100پیکسل پایین تر منتقل شده است و فاصله فعلی آن از بالای صفحه 400 پیکسل خواهد بود!

بنابراین متوجه شدید هنگامیکه قصد دارید به وسیله margin فاصله بین عناصر را تنظیم نمایید، فاصله ایجاد شده روی عناصر بعدی هم اثر خواهد گذاشت. بهترین راه حل در این مواقع استفاده از position می باشد. به این خاصیت می توان مقادیر زیر را اختصاص داد.

  • relative: با حفظ جایگاه فعلی عنصر، امکان جا به جایی آن را فراهم می کند.
  • absolute: هنگامیکه به یک عنصر پوزیشن absolute اختصاص می دهیم، عنصر مورد نظر موقعیت سایر عناصر را نادیده می گیرد و بالعکس، یعنی سایر عناصر نیز تصور می کنند که چنین عنصری در صفحه وجود ندارد!
  • fixed: یک موقعیت ثابت به عنصر می دهد و عنصر مورد نظر در آن نقطه بصورت ثابت قرار می گیرد.

هنگامی که به عناصر پوزیشن اختصاص می دهید، توسط چهار خاصیت زیر می توانید موقعیت آنها را تعیین نمایید:

  • top: فاصله از بالا.
  • right: فاصله از راست.
  • bottom: فاصله از پایین.
  • left: فاصله از چپ.

در مثال قبلی اگر به عنصر مورد نظر به جای margin، پوزیش relative اختصاص دهید و با خاصیت top فاصله آن را از عنصر بالایی تنظیم نمایید، مشکل حل خواهد شد.

#teal{
  background-color: teal;
  position: relative;
  top: 100px;
}

تنظیم فاصله از بالا به وسیله position

مثال: چهار div در صفحه قرار داده و چیدمان آنها را مشابه تصویر زیر انجام دهید.

چیدمان عناصر به وسیله پوزیشن absolute

برای حل این مثال ابتدا باید چهار div با کلاس یکسان و id متفاوت ایجاد نماییم.

<body>
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box"></div>
</body>

تنظیمات مشترک divها به وسیله کلاس انجام خواهد شد. از آنجا که قصد داریم عناصر را بصورت آزادانه در صفحه جا به جا نماییم بصورتیکه موقعیت آنها روی یکدیگر اثر نگذارند بنابراین باید همه آنها پوزیشن absolute داشته باشند.

<style>
  .box {
    width: 200px;
    height: 200px;
    position: absolute;
  }  
</style>

حال باید رنگ و موقعیت هریک از عناصر را به شکل مجزا تعیین کنیم.

<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  .box {
    width: 200px;
    height: 200px;
    position: absolute;
  }
  #box1 {
    background-color: #1b2a49;
    top: 120px;
    left: 150px;
  }
  #box2 {
    background-color: #465881;
    top: 210px;
    left: 250px;
  }
  #box3 {
    background-color: #00909e;
    top: 230px;
    left: 70px;
  }
  #box4{
    background-color: #f79071;
    top: 330px;
    left: 170px;
  }
</style>