عناصر را هر جا می‌خواهید قرار دهید! (راهنمای Position)

Positioning: جایگاه عناصر در صفحه! 🗺️

سلام به همه! تا الان یاد گرفتیم که عناصر چطور در صفحه نمایش داده می‌شن (مثل block و inline). اما گاهی اوقات نیاز داریم که جایگاه یه عنصر رو دقیق‌تر و فراتر از جریان عادی صفحه تعیین کنیم. اینجا است که خصوصیت `position` به کمک ما میاد! باهاش می‌تونیم عناصر رو جابجا کنیم، روی هم بندازیم و یا اون‌ها رو ثابت نگه داریم. بیاین با پنج حالت اصلی `position` آشنا بشیم: static, relative, absolute, fixed و sticky. 🚀

1. `position: static` (پیش‌فرض) 🧍

این حالت، مقدار پیش‌فرض برای همه‌ی عناصر هست. یعنی اگه هیچی تعیین نکنین، عنصر شما static هست.

• عناصر static طبق جریان عادی صفحه چیده می‌شن.
• خصوصیت‌های top, bottom, left, right هیچ تاثیری روی اون‌ها ندارن.
• اگه بخواین عنصر رو با relative جابجا کنین، ولی بعداً بخواین به حالت اول برگرده، می‌تونین position: static; رو براش تعیین کنین.

.static-element {
  position: static; /* این رفتار پیش‌فرض هست */
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}

عناصر static مثل آدم‌های عادی توی صف ایستادن و جایگاهشون توسط صف تعیین می‌شه.

2. `position: relative` (نسبی) 🚶

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

• عنصر اول در جریان عادی صفحه قرار می‌گیره.
• با استفاده از top, bottom, left, right می‌تونین اون رو جابجا کنین.
• نکته مهم: وقتی عنصر رو جابجا می‌کنین، فضایی که قبلاً اشغال کرده بود، خالی باقی می‌مونه و عناصر دیگه جای اون رو پر نمی‌کنن.
• عناصر دیگه این عنصر جابجا شده رو نمی‌بینن و رفتار خودشون رو بر اساس جایگاه اولیه‌اش انجام می‌دن.
• برای اینکه یه عنصر دیگه رو نسبت به این عنصر جابجا کنین (با absolute)، این عنصر relative یه “کانتینر” یا “مرجع” محسوب می‌شه.

.relative-element {
  position: relative;
  top: 20px; /* 20 پیکسل از جایگاه اولیش به پایین می‌ره */
  left: 10px; /* 10 پیکسل از جایگاه اولیش به راست می‌ره */
  background-color: lightcoral;
  padding: 10px;
  margin: 5px;
}

.following-element {
  /* این عنصر زیر فضای خالی عنصر relative میاد */
  background-color: lightgreen;
  padding: 10px;
}

تصور کنین یه کارت روی میز گذاشتین. وقتی با relative اون رو کمی جابجا می‌کنین، جای کارت روی میز خالی می‌مونه و کارت بعدی رو نمی‌ذارین تو اون جای خالی.

3. `position: absolute` (مطلق) 🎯

این حالت به شما اجازه می‌ده عنصر رو کاملاً نسبت به نزدیک‌ترین والدِ دارای position غیر از static (یعنی relative, absolute, fixed یا sticky) قرار بدین. اگه هیچ والد relative یا غیر-static ی وجود نداشته باشه، عنصر نسبت به کل صفحه (html) قرار می‌گیره.

• عناصر absolute از جریان عادی صفحه خارج می‌شن. یعنی فضایی که اشغال می‌کردن، توسط عناصر دیگه پر می‌شه.
• با top, bottom, left, right می‌تونین اون‌ها رو دقیقاً در محل مورد نظر قرار بدین. (مثلاً top: 0; left: 0; اونو به گوشه بالا سمت چپ والدش می‌بره).
• می‌تونن روی عناصر دیگه قرار بگیرن.

.parent-container {
  position: relative; /* این والد، مرجع برای عنصر absolute می‌شه */
  width: 300px;
  height: 200px;
  background-color: #eee;
  margin-top: 50px; /* برای اینکه واضح‌تر دیده بشه */
}

.absolute-element {
  position: absolute;
  top: 30px; /* 30 پیکسل از بالای والد */
  right: 30px; /* 30 پیکسل از راست والد */
  width: 100px;
  height: 50px;
  background-color: rgba(255, 0, 0, 0.7); /* قرمز نیمه‌شفاف */
  color: white;
  text-align: center;
  padding: 10px;
}

عناصر absolute مثل برچسب قیمت روی یه جنس هستن که می‌شه اون‌ها رو هر جایی چسبوند، بدون اینکه تاثیری روی چیدمان بقیه‌ی اجناس بذارن.

4. `position: fixed` (ثابت) 📌

این حالت شبیه absolute هست، اما یه تفاوت کلیدی داره: عناصر fixed همیشه نسبت به پنجره مرورگر (viewport) ثابت می‌مونن و حتی وقتی صفحه رو اسکرول می‌کنین، تکون نمی‌خورن.

• عناصر fixed هم از جریان عادی صفحه خارج می‌شن.
• با top, bottom, left, right نسبت به پنجره مرورگر موقعیت‌دهی می‌شن.
• وقتی صفحه رو اسکرول می‌کنین، در جای خودشون باقی می‌مونن.

.fixed-header {
  position: fixed;
  top: 0; /* بچسبه به بالای صفحه */
  left: 0; /* بچسبه به چپ صفحه */
  width: 100%;
  background-color: rgba(33, 150, 243, 0.8); /* آبی نیمه‌شفاف */
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 1000; /* برای اینکه مطمئن بشیم روی همه چیز میاد */
}

.content-that-scrolls {
  margin-top: 100px; /* برای اینکه محتوا زیر هدر ثابت قرار نگیره */
  height: 1500px; /* تا صفحه اسکرول داشته باشه */
  background-color: #f0f0f0;
}

هدرها، فوترها یا دکمه‌های “بازگشت به بالا” که همیشه در دید کاربر هستن، معمولاً با `position: fixed` ساخته می‌شن.

5. `position: sticky` (چسبنده) 📍🔗

این حالت یه ترکیب جالب از relative و fixed هست. عنصر sticky اولش مثل relative رفتار می‌کنه، اما وقتی صفحه رو اسکرول می‌کنین و به یه نقطه‌ی مشخص (که با top, bottom, left, right تعیین می‌کنین) می‌رسه، مثل fixed می‌چسبه به صفحه.

• عنصر ابتدا در جریان عادی صفحه قرار می‌گیره.
• وقتی به حد تعیین شده برسه (مثلاً top: 0;)، در جای خودش ثابت می‌شه.
• نکته مهم: برای اینکه sticky درست کار کنه، والدش (کانتینر) باید ارتفاع کافی داشته باشه و خود عنصر sticky باید دارای یکی از مقادیر top, bottom, left, right باشه.

.sticky-sidebar {
  position: sticky;
  top: 80px; /* وقتی 80 پیکسل از بالای صفحه فاصله داره، می‌چسبه */
  background-color: lightgray;
  padding: 15px;
  width: 200px; /* فرض کنید این یه سایدبار هست */
}

.main-content-area {
  height: 1000px; /* برای اسکرول */
  background-color: #f9f9f9;
  padding: 20px;
}

از `sticky` برای هدرهایی که وقتی پایین می‌رن، توی یه ارتفاع مشخص می‌چسبن، یا سایدبارهایی که موقع اسکرول کردن ثابت می‌مونن، استفاده می‌شه.

6. `z-index`: اولویت نمایش عناصر روی هم! ⬆️

وقتی عناصری روی هم قرار می‌گیرن (مثلاً با absolute یا fixed)، چطور بفهمیم کدوم جلوتر نمایش داده بشه؟ اینجا z-index وارد می‌شه!

• z-index فقط روی عناصری کار می‌کنه که position غیر از static دارن.
• هر چقدر عدد z-index بزرگتر باشه، اون عنصر روی عناصر دیگه (با z-index کوچکتر) نمایش داده می‌شه.
• مقدار پیش‌فرض auto (یا صفر) هست.

.element-behind {
  position: absolute;
  z-index: 1; /* این عنصر پایین‌تره */
  background-color: blue;
  width: 100px; height: 100px;
}

.element-on-top {
  position: absolute;
  z-index: 10; /* این عنصر بالاتر از عنصر قبلیه */
  background-color: red;
  width: 100px; height: 100px;
  top: 20px; left: 20px;
}

z-index مثل ورق زدن کارت‌هاست؛ هر کارتی که شماره بیشتری داشته باشه، روی کارت‌های با شماره کمتر میاد.

یادگیری درست `position` و `z-index` یکی از مهم‌ترین مهارت‌ها در CSS هست. این‌ها به شما قدرت کنترل کامل روی چیدمان عناصر رو می‌دن و بهتون اجازه می‌دن طراحی‌های پیچیده و خلاقانه بسازین! ✨