آموزش جامع Positioning در CSS

🎯 اهداف یادگیری

• درک مفهوم Positioning و انواع آن در CSS
• آشنایی با کاربردهای هر نوع Position
• یادگیری تفاوت بین positionهای مختلف
• تسلط بر استفاده عملی از Position در پروژه‌های واقعی

📌 Positioning در CSS چیست؟

Positioning یکی از مهم‌ترین مفاهیم در CSS است که به شما امکان می‌دهد موقعیت عناصر را در صفحه کنترل کنید:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

انواع Position در CSS:

• static: پیش‌فرض - عنصر در جریان عادی صفحه قرار می‌گیرد
• relative: موقعیت عنصر نسبت به جایگاه اصلی خود تغییر می‌کند
• absolute: موقعیت عنصر نسبت به نزدیکترین عنصر والد با position غیر static تعیین می‌شود
• fixed: موقعیت عنصر نسبت به viewport ثابت می‌ماند
• sticky: ترکیبی از relative و fixed - تا حدی که عنصر در viewport قابل مشاهده است

📌 position: relative

این نوع position به شما امکان می‌دهد عنصر را نسبت به موقعیت اصلی خود جابجا کنید:

.box {
  position: relative;
  top: 50px;
  left: 100px;
}

ویژگی‌های مهم:

• جایگاه اصلی حفظ می‌شود: عناصر دیگر همچنان فضای اصلی آن را در نظر می‌گیرند
• محدودیت ندارد: می‌تواند از والد خود خارج شود
• برای تنظیم موقعیت جزئی: مناسب برای تنظیمات کوچک موقعیت

📌 position: absolute

این نوع position عنصر را از جریان عادی صفحه خارج می‌کند:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

ویژگی‌های مهم:

• نیاز به والد position شده: معمولاً نیاز به یک والد با position: relative دارد
• از جریان صفحه خارج می‌شود: عناصر دیگر فضای آن را در نظر نمی‌گیرند
• برای منوهای آبشاری: مناسب برای ساخت منوها، tooltipها و overlayها

📌 position: fixed

این نوع position عنصر را نسبت به viewport ثابت نگه می‌دارد:

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

ویژگی‌های مهم:

• ثابت در صفحه: با اسکرول صفحه حرکت نمی‌کند
• نسبت به viewport: موقعیت آن نسبت به پنجره مرورگر ثابت است
• کاربردهای رایج: نوارهای ناوبری، دکمه‌های بازگشت به بالا، چت بات‌ها

📌 position: sticky

ترکیبی از relative و fixed - ابتدا مانند relative رفتار می‌کند و پس از رسیدن به نقطه خاصی fixed می‌شود:

.header {
  position: sticky;
  top: 0;
  background-color: white;
}

ویژگی‌های مهم:

• ترکیب دو رفتار: ابتدا relative و پس از رسیدن به آستانه مشخص fixed
• نیاز به نقطه چسبندگی: باید حداقل یکی از top, right, bottom, left را مشخص کنید
• پشتیبانی مرورگرها: در مرورگرهای جدید به خوبی پشتیبانی می‌شود

📌 تفاوت انواع Position

📌 تمرین عملی

با استفاده از positionهای مختلف، لایه‌بندی زیر را ایجاد کنید:

<!-- ساختار HTML -->
<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
</div>

راهنمای تمرین:

1. یک container با position: relative ایجاد کنید
2. box-1 را با position: absolute در گوشه بالا-راست قرار دهید
3. box-2 را با position: fixed در پایین صفحه ثابت کنید
4. box-3 را با position: sticky به بالای صفحه بچسبانید

📌 نکات پیشرفته Positioning

برخی نکات حرفه‌ای برای کار با position در CSS:

۱. z-index و لایه‌بندی

وقتی از positionهای غیر static استفاده می‌کنید، می‌توانید با z-index ترتیب نمایش عناصر را کنترل کنید:

.modal {
  position: fixed;
  z-index: 1000;
}
.overlay {
  position: fixed;
  z-index: 999;
}

۲. transform و position

استفاده از transform می‌تواند رفتار position: fixed را تغییر دهد:

.parent {
  transform: translate(0); /* این باعث می‌شود position: fixed فرزندان نسبت به این والد کار کند */
}

۳. Performance Considerations

• position: fixed و absolute: می‌توانند باعث repaintهای مکرر شوند
• position: sticky: در مرورگرهای جدید بهینه‌سازی شده است
• استفاده بهینه: فقط زمانی از positionهای غیر static استفاده کنید که واقعاً نیاز دارید

📌 قدم بعدی

در درس بعدی با Flexbox در CSS برای چیدمان‌های مدرن آشنا خواهیم شد!