مرتب‌سازی با ویژگی‌های مختلف CSS

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

همه ما وقتی شروع به یادگیری ویژگی‌های CSS می‌کنیم به ویژگی position برمی‌خوریم. این ویژگی برای تنظیم مکان قرارگیری عناصر روی صفحه استفاده می‌شه و می‌تونه به حالت هایی مثل static, relative, absolute, fixed, و sticky باشه. هرکدوم از این حالت‌ها ویژگی و رفتار خاص خودشون رو دارن که باعث میشه زاویه نگاهمون به طراحی صفحات وب و مدیریت موقعیت عناصر بهتر بشه.

حالا می‌خوایم یه مقدار بیشتر به این نکات بپردازیم. مثلاً در مورد relative وقتی از این حالت استفاده می‌کنیم، عنصر نسبت به مکان اصلی خودش حرکت می‌کنه، اما کشیدن توی صفحه رو (layout) تغییر نمی‌ده. این نوعی مثل اینه که به عنصر محلی رو برای تغییر حرکتش بگیم. اما وقتی از absolute استفاده می‌کنیم، عنصر رو نسبت به نزدیک‌ترین نیاکان دارای موقعیت متفاوت می‌بریم، این بدون در نظر گرفتن صفحه همسایه است.

Cab ندارید از fixed استفاده کنین؟ این باعث میشه عنصرتون همواره توی یه موقعیت خاص در صفحه بمونه، حتی اگه اسکرول کنید. این برای ساخت اینفوها یا نوارهای جهت‌یابی که باید ثابت بمونن عالیه. یکی دیگه از این حالت‌ها sticky هست که ترکیبی از مفهوم ثابت و نسبیه. یعنی یه عنصر وقتی به نقطه‌ای رسید ثابت میمونه تا زمانی که کاربر به یه نقطه دیگه رسید.

مثال های کاربردی از استفاده از ویژگی position در CSS

<style>
  .relative-element {
    position: relative;
    top: 20px;
    left: 30px;
  }
  .absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
  }
  .fixed-element {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .sticky-element {
    position: sticky;
    top: 0;
  }
</style>

<div class="relative-element">
  این یه عنصر از نوع relative هست.
</div>
<div class="absolute-element">
  این یه عنصر از نوع absolute هست.
</div>
<div class="fixed-element">
  این یه عنصر از نوع fixed هست.
</div>
<div class="sticky-element">
  این یه عنصر از نوع sticky هست.
</div>

توضیحات خط به خط کد

position: relative; این ویژگی جایگاه عنصری رو در صفحه نسبت به مکان اصلیش کمی تغییر میده.
top: 20px; به این معنی که عنصر به اندازه 20 پیکسل از بالا فاصله می‌گیره.
left: 30px; باعث میشه عنصر 30 پیکسل به سمت راست بره.
position: absolute; جایگاه عنصر رو به یک موقعیت مشخص نسبی به نیاکان دارای موقعیت می‌بره.
position: fixed; عنصری از صفحه خارج از جریان قرار می‌گیره و نسبت به پنجره ثابت می‌مونه.
position: sticky; این باعث میشه عنصر به حالت تثبیت در بیاد وقتی که به بالای اسکرول می‌رسه.