خاصیت position تعیین می‌کنه که یک عنصر HTML در صفحه دقیقاً کجا قرار بگیره و چطور نسبت به سایر عناصر یا والد خودش موقعیت‌دهی بشه.

1️⃣ مقادیر position

🔸 static (پیش‌فرض)

• همه عناصر به طور پیش‌فرض static هستن.

• یعنی در جای طبیعی خودشون طبق جریان صفحه قرار می‌گیرن.

• top ، left ، bottom ، right روی اون‌ها اثری نداره.

div {
  position: static;
}

🔸 relative

• عنصر در جای طبیعی خودش باقی می‌مونه،

• ولی می‌تونیم با top, left, right, bottom جابه‌جاش کنیم.

• جای اصلی عنصر همچنان رزرو می‌مونه.

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

🔸 absolute

• عنصر از جریان طبیعی صفحه خارج می‌شه.

• موقعیتش بر اساس نزدیک‌ترین والدی که position≠static داره تعیین می‌شه.

• اگر هیچ والد position‌دار نباشه → نسبت به کل صفحه قرار می‌گیره.

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

🔸 fixed

• عنصر ثابت روی صفحه قرار می‌گیره و با اسکرول حرکت نمی‌کنه.

• همیشه نسبت به پنجره مرورگر (viewport) موقعیت‌دهی می‌شه.

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

🔸 sticky

• ترکیبی از relative و fixed.

• تا وقتی که در محدوده والدش هست، مثل relative عمل می‌کنه.

• وقتی اسکرول کنیم و به مقدار top رسید → مثل fixed می‌چسبه.

.header {
  position: sticky;
  top: 0;
  background: coral;
}

2️⃣ نکات مهم

• z-index فقط روی عناصر position‌دار (غیر از static) کار می‌کنه.

• absolute برای ساخت tooltip، modal، dropdown خیلی کاربرد داره.

• fixed برای navbar ثابت یا دکمه برگشت به بالا عالیه.

• sticky بیشتر در عنوان‌های بخش‌بندی یا جدول‌ها استفاده می‌شه.

✅ خلاصه:

• static → پیش‌فرض

• relative → جابه‌جایی نسبت به مکان اصلی

• absolute → جابه‌جایی نسبت به والد position‌دار

• fixed → ثابت روی صفحه (اسکرول بی‌تأثیر)

• sticky → ترکیب relative و fixed