آموزش خاصیت position در CSS با مثال عملی

توی این جلسه می‌خوایم آموزش خاصیت position در CSS رو از پایه شروع کنیم. اول با پنج مقدار اصلی static، relative، absolute، fixed و sticky آشنا می‌شین. بعد هم یاد می‌گیرین هرکدوم موقع اسکرول چه رفتاری دارن، جای خودشون رو در صفحه حفظ می‌کنن یا نه و نسبت به کدوم کادر جابه‌جا می‌شن.

در ادامه چند نمونه واقعی مثل نشان گوشه تصویر، دکمه ثابت و منوی چسبان رو می‌سازیم. در آخر هم سراغ z-index و transition می‌ریم تا بتونید هم ترتیب لایه‌ها رو کنترل کنید و هم تغییر حالت المان‌ها رو نرم‌تر نشون بدید. اگه جلسه‌های قبلی رو نخوندین، بهتره اول معرفی خاصیت‌های پرکاربرد CSS رو مرور کنید.

خاصیت position در CSS چیه و چه کاربردی داره؟

خاصیت position در CSS مشخص می‌کنه جای یک المان چطور محاسبه بشه. المان یعنی یکی از بخش‌های صفحه، مثل تصویر، دکمه، عنوان یا منو. با این خاصیت می‌تونید یک نشان رو روی گوشه تصویر بذارید، دکمه تماس رو در گوشه صفحه ثابت کنید یا کاری کنید منو بعد از کمی اسکرول به بالای صفحه بچسبه.

مرورگر به‌طور عادی المان‌ها رو طبق ترتیب کدهای HTML کنار هم یا زیر هم می‌چینه. به این ترتیب طبیعی، «جریان عادی صفحه» گفته می‌شه. بعضی مقدارهای position فقط ظاهر المان رو جابه‌جا می‌کنن، ولی جای اصلی اون همچنان خالی می‌مونه. بعضی مقدارها هم المان رو از جریان عادی بیرون میارن و بقیه محتوا جای اون رو می‌گیره.

مقادیر اصلی position در CSS

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

position: static؛ حالت پیش‌فرض المان‌ها

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

ویژگی‌های top، right، bottom و left روی یک المان static اثری ندارن. پس اگه برای یک دکمه top: 20px نوشتین و هیچ تغییری ندیدین، اول مقدار position اون رو بررسی کنید.

.box {  position: static;  top: 20px; /* در این حالت اثری نداره */}

position: relative؛ جابه‌جایی نسبت به جای اصلی

با position: relative می‌تونید المان رو نسبت به جای اصلی خودش جابه‌جا کنید. مثلاً top: 10px المان رو ۱۰ پیکسل از لبه بالایی جای اصلیش فاصله می‌ده و در عمل اون رو پایین‌تر می‌بره.

نکته مهم اینه که فضای اصلی المان در صفحه حفظ می‌شه. یعنی بقیه المان‌ها طوری رفتار می‌کنن که انگار المان هنوز در جای قبلی خودش قرار داره. به همین دلیل ممکنه المان جابه‌جاشده روی محتوای کناری بیفته.

.box {  position: relative;  top: 12px;  right: 20px;}

کاربرد مهم دیگه relative اینه که می‌تونه برای فرزند absolute یک کادر مرجع بسازه. توی مثال‌های بعدی این کاربرد رو کامل می‌بینید.

position: absolute؛ جای‌گذاری نسبت به نزدیک‌ترین کادر مرجع

المانی که position: absolute داره از جریان عادی صفحه بیرون میاد. یعنی فضای قبلی اون حفظ نمی‌شه و المان‌های دیگه می‌تونن جای خالیش رو پر کنن.

جای این المان نسبت به «کادر مرجع» یا containing block محاسبه می‌شه. کادر مرجع یعنی محدوده‌ای که مقدارهایی مثل top و right از لبه‌های اون حساب می‌شن. در بیشتر پروژه‌های ساده، نزدیک‌ترین کادر بیرونی یا والد بالاتر که position اون مقداری غیر از static داره، این مرجع رو می‌سازه.

برای همین معمولاً به والد position: relative می‌دیم. این کار والد رو جابه‌جا نمی‌کنه، ولی باعث می‌شه فرزند absolute داخل همون کادر کنترل بشه. اگه چنین مرجعی پیدا نشه، جای المان معمولاً نسبت به کادر اولیه صفحه محاسبه می‌شه.

<div class="card">  <img src="product.jpg" alt="تصویر محصول">  <span class="badge">جدید</span></div>

.card {  position: relative;}.badge {  position: absolute;  top: 10px;  right: 10px;}

ویژگی‌هایی مثل transform و contain هم در بعضی شرایط کادر مرجع می‌سازن. پس اگه یک المان absolute برخلاف انتظارتون جابه‌جا شد، فقط position والدها رو نبینید و این ویژگی‌ها رو هم بررسی کنید.

position: fixed؛ ثابت نگه داشتن المان موقع اسکرول

position: fixed المان رو از جریان عادی بیرون میاره و معمولاً جای اون رو نسبت به viewport حساب می‌کنه. viewport همون بخش قابل‌مشاهده صفحه در پنجره مرورگره.

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

.contact-button {  position: fixed;  right: 20px;  bottom: 20px;  z-index: 100;}

یک استثنای مهم هم هست. بعضی کادرهای بیرونی با ویژگی‌هایی مثل transform، perspective یا بعضی مقدارهای contain می‌تونن کادر مرجع تازه‌ای بسازن. در این شرایط، المان fixed ممکنه به‌جای کل پنجره مرورگر نسبت به همون کادر قرار بگیره.

یادتون نره دکمه یا نوار ثابت ممکنه روی محتوای صفحه بیفته. بهتره اون رو در موبایل هم آزمایش کنید و از لبه‌های صفحه و محتوای زیرش فاصله کافی بذارید.

position: sticky؛ چسباندن المان بعد از رسیدن به یک نقطه

position: sticky ترکیبی از رفتار relative و fixed رو ارائه می‌ده. المان اول همراه محتوای صفحه حرکت می‌کنه. وقتی به فاصله تعیین‌شده برسه، داخل محدوده اسکرول خودش می‌چسبه.

برای فعال شدن رفتار چسبان در هر محور، باید حداقل یکی از جهت‌های همون محور مقدار مشخصی غیر از auto داشته باشه. مثلاً برای چسبیدن عمودی می‌تونید top: 0 بنویسید. این کد یعنی وقتی لبه بالایی المان به بالای محدوده اسکرول رسید، همون‌جا بمونه.

.site-header {  position: sticky;  top: 0;  z-index: 10;  background: #fff;}

رفتار sticky به والد و محدوده اسکرول وابسته‌ست. اگه یکی از والدها overflow: hidden، auto یا scroll داشته باشه، همون والد می‌تونه محدوده اسکرول المان بشه. کوتاه بودن والد هم ممکنه فرصت کافی برای چسبیدن المان باقی نذاره.

کار با top، right، bottom و left

ویژگی‌های top، right، bottom و left فاصله المان رو از لبه کادر مرجع تعیین می‌کنن. این ویژگی‌ها روی المان‌های موقعیت‌دار، یعنی حالت‌های relative، absolute، fixed و sticky کاربرد دارن و روی static اثر نمی‌ذارن.

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

راست‌چین بودن متن معنی right و left رو عوض نمی‌کنه. right همیشه به لبه راست فیزیکی اشاره می‌کنه. برای کدی که باید با جهت نوشتار هماهنگ بشه، می‌تونید بعداً سراغ ویژگی‌های منطقی مثل inset-inline-start برید.

ویژگی inset شکل کوتاه‌تر همین چهار جهت هست. مثلاً کد زیر هر چهار فاصله رو صفر می‌کنه:

.overlay {  position: absolute;  inset: 0;}

تفاوت relative، absolute، fixed و sticky

برای جابه‌جایی کوچک نسبت به جای اصلی از relative استفاده کنید. برای گذاشتن یک المان داخل گوشه والد، absolute مناسبه. برای دکمه‌ای که باید همیشه در گوشه نمایشگر بمونه سراغ fixed برید. برای عنوان یا منویی که فقط بعد از رسیدن به یک نقطه بچسبه، sticky انتخاب بهتریه.

چند مثال کاربردی از position در CSS

قرار دادن نشان روی گوشه تصویر

در این نمونه، کارت مرجع جای‌گذاریه و نشان با فاصله ۱۲ پیکسل از بالا و راست اون قرار می‌گیره:

.product-card {  position: relative;  display: inline-block;}.product-card img {  display: block;  max-width: 100%;}.product-badge {  position: absolute;  top: 12px;  right: 12px;  padding: 6px 10px;  color: #fff;  background: #e63946;  border-radius: 6px;}

ساخت دکمه ثابت در گوشه صفحه

کد زیر دکمه رو ۲۰ پیکسل از پایین و راست صفحه فاصله می‌ده. مقدار z-index هم کمک می‌کنه دکمه پشت بخش‌های معمول صفحه نره.

.fixed-button {  position: fixed;  right: 20px;  bottom: 20px;  padding: 12px 18px;  color: #fff;  background: #2563eb;  border-radius: 8px;  z-index: 100;}

ساخت منوی چسبان موقع اسکرول

برای منوی چسبان، پس‌زمینه مشخص بذارید تا محتوای در حال اسکرول از زیر نوشته‌های منو دیده نشه:

.main-menu {  position: sticky;  top: 0;  padding: 16px;  background: #fff;  z-index: 20;}

وسط‌چین کردن المان با absolute و transform

top: 50% و left: 50% گوشه المان رو به مرکز والد می‌برن. بعد transform نصف عرض و ارتفاع خود المان رو برمی‌گردونه تا مرکز واقعی اون دقیقاً وسط قرار بگیره.

.parent {  position: relative;  min-height: 300px;}.centered-box {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

برای چیدمان‌های معمول امروزی، Flexbox یا Grid اغلب راه ساده‌تری برای وسط‌چین کردن هست. این روش بیشتر وقتی مفیده که المان باید روی محتوای دیگه قرار بگیره.

اشتباه‌های رایج موقع استفاده از position

• فراموش کردن مرجع برای absolute: اگه والد position: relative نداشته باشه، فرزند ممکنه نسبت به کادر دیگه‌ای جابه‌جا بشه.
• استفاده از جهت‌ها روی static: مقدارهایی مثل top و left روی position: static اثر نمی‌ذارن.
• بی‌توجهی به overflow والد sticky: ویژگی overflow می‌تونه محدوده اسکرول رو عوض کنه و رفتار چسبان رو محدود کنه.
• پوشاندن محتوا با fixed: یک نوار ثابت ممکنه روی عنوان یا دکمه‌های صفحه بیفته. برای محتوای زیر اون فاصله کافی در نظر بگیرین.
• استفاده زیاد برای چیدمان اصلی: برای ساخت ستون‌ها و بخش‌بندی کلی صفحه، Flexbox و Grid معمولاً منعطف‌تر هستن. position رو برای جای‌گذاری‌های مشخص نگه دارین.

کنترل روی‌هم‌افتادن المان‌ها با z-index

وقتی چند المان روی هم قرار می‌گیرن، z-index به مرورگر کمک می‌کنه ترتیب لایه‌ها رو مشخص کنه. معمولاً المانی با z-index بیشتر، جلوی المانی با مقدار کمتر دیده می‌شه.

.overlay {  position: absolute;  z-index: 2;}.dialog {  position: fixed;  z-index: 10;}

اگه z-index: 9999 هم مشکل رو حل نکرد، احتمالاً المان‌ها داخل محدوده‌های لایه‌بندی جدا هستن. این محدوده با نام stacking context شناخته می‌شه؛ یعنی هر گروه لایه‌های خودش رو داره. بعضی ویژگی‌ها مثل transform، شفافیت کمتر از ۱ و ترکیب بعضی مقدارهای position و z-index می‌تونن چنین محدوده‌ای بسازن.

در این شرایط فقط عدد فرزند رو زیاد نکنید. والدهای دو المان رو بررسی کنید و ببینید کدوم والد در لایه بالاتری قرار گرفته. فرزند نمی‌تونه به‌سادگی از محدوده لایه‌بندی والد خودش بیرون بزنه.

متحرک کردن تغییرات با transition در CSS

حالا که جای المان‌ها رو کنترل کردین، می‌تونید تغییر حالت اون‌ها رو هم نرم کنید. مثلاً نشانی که با absolute روی کارت قرار گرفته، موقع رفتن نشانگر ماوس روی کارت کمی حرکت می‌کنه.

transition چیه و چه کاری انجام می‌ده؟

transition در CSS تغییر یک ویژگی از مقدار قبلی به مقدار جدید رو در یک بازه زمانی نمایش می‌ده. مثلاً می‌تونید کاری کنید رنگ دکمه موقع رفتن نشانگر ماوس روی اون، به‌جای تغییر ناگهانی در ۳۰۰ میلی‌ثانیه عوض بشه.

اجزای اصلی transition

• transition-property مشخص می‌کنه تغییر کدوم ویژگی متحرک بشه. بهتره به‌جای all نام ویژگی‌هایی مثل transform یا background-color رو بنویسید.
• transition-duration مدت اجرای تغییر رو تعیین می‌کنه. واحد s یعنی ثانیه و ms یعنی میلی‌ثانیه. مقدار اولیه اون 0s هست.
• transition-timing-function الگوی سرعت تغییر رو مشخص می‌کنه.
• transition-delay مدت مکث قبل از شروع تغییر رو تعیین می‌کنه.
• transition-behavior با مقدار allow-discrete اجازه می‌ده بعضی تغییرهای گسسته وارد گذار بشن. تغییر گسسته یعنی تغییری که حالت میانی معمولی نداره. چون نتیجه به ویژگی موردنظر و نسخه مرورگر بستگی داره، بهتره قبل از استفاده سازگاری همون حالت رو در مرورگرهای هدفتون بررسی کنید.

تفاوت ease، linear، ease-in، ease-out و ease-in-out

• ease: تغییر آروم شروع می‌شه، وسط سرعت می‌گیره و در پایان دوباره آروم می‌شه.
• linear: سرعت از اول تا آخر یکنواخت می‌مونه.
• ease-in: تغییر آروم شروع می‌شه و در ادامه سرعت می‌گیره.
• ease-out: تغییر سریع شروع می‌شه و در پایان آروم می‌شه.
• ease-in-out: تغییر آروم شروع می‌شه، وسط سرعت می‌گیره و دوباره آروم تموم می‌شه.

نوشتن transition به‌شکل کوتاه

می‌تونید اجزای اصلی رو در یک خط بنویسید. ترتیب رایج شامل نام ویژگی، مدت اجرا، الگوی سرعت و تأخیر هست:

.button {  transition: transform 300ms ease-out 0s;}

اگه چند ویژگی دارین، هر گذار رو با ویرگول جدا کنید:

.button {  transition: transform 300ms ease, background-color 300ms ease;}

یک مثال کامل برای ترکیب position و transition

در این مثال یک نشان روی کارت قرار می‌گیره و موقع قرار گرفتن نشانگر روی کارت، کمی بالا میاد. برای حرکت نرم از transform استفاده کردیم:

.card {  position: relative;  width: 280px;  min-height: 180px;  overflow: hidden;  border-radius: 12px;}.card-label {  position: absolute;  right: 16px;  bottom: 16px;  padding: 8px 12px;  color: #fff;  background: #111827;  border-radius: 6px;  transform: translateY(0);  transition: transform 250ms ease-out;}.card:hover .card-label {  transform: translateY(-8px);}@media (prefers-reduced-motion: reduce) {  .card-label {    transition: none;  }}

بخش prefers-reduced-motion برای کاربرهاییه که در تنظیمات دستگاهشون حرکت کمتر رو انتخاب کردن. در این حالت، حرکت نشان غیرفعال می‌شه.

مثال اجرایی کامل position در CSS

برای اجرای نمونه زیر، یک فایل با نام index.html بسازید، کل کد رو داخلش بذارید و فایل رو با مرورگر باز کنید. با اسکرول صفحه، عنوان چسبان و دکمه ثابت رو می‌بینید. وقتی نشانگر ماوس رو هم روی کارت ببرید، نشان گوشه کارت نرم حرکت می‌کنه.

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>تمرین position در CSS</title>  <style>    * {      box-sizing: border-box;    }    body {      margin: 0;      min-height: 1600px;      font-family: sans-serif;      color: #1f2937;      background: #f3f4f6;    }    .sticky-title {      position: sticky;      top: 0;      z-index: 20;      margin: 0;      padding: 18px;      color: #fff;      background: #2563eb;    }    .content {      width: min(90%, 720px);      margin: 60px auto;    }    .product-card {      position: relative;      min-height: 260px;      padding: 40px 24px;      overflow: hidden;      background: #fff;      border-radius: 16px;      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    }    .product-badge {      position: absolute;      top: 16px;      right: 16px;      padding: 8px 12px;      color: #fff;      background: #e11d48;      border-radius: 8px;      transform: translateY(0);      transition: transform 250ms ease-out;    }    .product-card:hover .product-badge {      transform: translateY(6px);    }    .fixed-button {      position: fixed;      right: 20px;      bottom: 20px;      z-index: 30;      padding: 12px 18px;      color: #fff;      text-decoration: none;      background: #16a34a;      border-radius: 999px;      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);    }    @media (prefers-reduced-motion: reduce) {      .product-badge {        transition: none;      }    }  </style></head><body>  <h1 class="sticky-title">تمرین position در CSS</h1>  <main class="content">    <article class="product-card">      <span class="product-badge">جدید</span>      <h2>کارت آزمایشی</h2>      <p>این کارت والد relative و نشان داخل اون فرزند absolute هست.</p>    </article>  </main>  <a class="fixed-button" href="#">دکمه ثابت</a></body></html>

در این نمونه، product-card کادر مرجع نشان رو می‌سازه. دکمه سبز با fixed موقع اسکرول در گوشه صفحه می‌مونه و عنوان آبی با sticky بعد از رسیدن به بالای صفحه می‌چسبه. می‌تونید مقدارهای top، right و bottom رو تغییر بدید و نتیجه رو همون لحظه ببینید.

تمرین عملی این جلسه

برای اینکه تفاوت حالت‌ها خوب توی ذهنتون بمونه، یک فایل HTML و یک فایل CSS بسازید و این مراحل رو به‌ترتیب انجام بدید:

1. یک کادر والد بسازید و به اون position: relative بدید.
2. یک المان فرزند رو با position: absolute در گوشه بالا و راست والد بذارید.
3. یک دکمه با position: fixed در گوشه پایین صفحه قرار بدید.
4. محتوایی بلندتر از صفحه بسازید و رفتار یک عنوان رو با position: sticky و top: 0 آزمایش کنید.
5. با transition رنگ یا transform یکی از المان‌ها رو موقع hover نرم تغییر بدید.

بعد از هر مرحله صفحه رو اسکرول کنید و کادر مرجع، فضای خالی و رفتار المان رو ببینید. این آزمایش کوتاه تفاوت absolute، fixed و sticky رو خیلی واضح می‌کنه.

جمع‌بندی

در این آموزش دیدیم که static حالت عادی المانه، relative جای اصلی رو حفظ می‌کنه و absolute المان رو از جریان صفحه بیرون میاره. fixed معمولاً المان رو نسبت به صفحه نمایش ثابت نگه می‌داره و sticky بعد از رسیدن به آستانه مشخص داخل محدوده اسکرول می‌چسبه.

همچنین یاد گرفتیم که کادر مرجع روی نتیجه نهایی اثر زیادی داره و مشکل z-index همیشه فقط با بالا بردن عدد حل نمی‌شه. برای تغییرهای نرم هم می‌تونید از transition استفاده کنید. بهتره برای چیدمان اصلی صفحه سراغ Flexbox یا Grid برید و position رو برای جای‌گذاری‌های دقیق و روی‌هم‌افتادن المان‌ها نگه دارین.

سؤال‌های رایج درباره position در CSS

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.