CSS Anchor Positioning چیست؟ روش جدید جایگذاری Tooltip، منو و پاپ آپ بدون جاوا اسکریپت

یکی از این قابلیت‌ها CSS Anchor Positioning است؛ قابلیتی که به شما اجازه می‌دهد یک عنصر را به‌عنوان Anchor تعریف کنید و عنصر دیگری را نسبت به آن جایگذاری کنید. در این مقاله بررسی می‌کنیم Anchor Positioning چیست، چگونه کار می‌کند، چه تفاوتی با روش‌های قدیمی دارد و چطور می‌توان با آن Tooltip، منو و Popup ساخت.

CSS Anchor Positioning چیست؟

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

در این مدل، یک عنصر به‌عنوان Anchor یا نقطه مرجع تعریف می‌شود و عنصر دیگری که به آن وابسته است، بر اساس موقعیت Anchor قرار می‌گیرد.

برای مثال تصور کنید چنین رابطی داریم:

       ┌──────────────────────┐
       │      Tooltip         │
       └──────────┬───────────┘
                  ↓
             [ دکمه ]

در روش سنتی ممکن است برای قرار دادن Tooltip لازم باشد موقعیت دکمه را با JavaScript پیدا کنیم. اما با Anchor Positioning می‌توان دکمه را به‌عنوان Anchor معرفی کرد و Tooltip را به آن متصل کرد.

چرا Anchor Positioning مهم است؟

مشکل اصلی روش‌های قدیمی این نیست که کار نمی‌کنند؛ بلکه در رابط‌های پیچیده، مدیریت آن‌ها می‌تواند دشوار شود.

برای مثال یک Tooltip ممکن است:

• در کنار دکمه قرار بگیرد.
• در لبه صفحه به خارج از Viewport برود.
• با تغییر اندازه پنجره جابه‌جا شود.
• با اسکرول صفحه نیاز به محاسبه مجدد داشته باشد.
• داخل یک Container پیچیده قرار گرفته باشد.

در چنین شرایطی JavaScript ممکن است مجبور شود دائماً موقعیت و اندازه عناصر را بررسی کند. Anchor Positioning تلاش می‌کند بخشی از این منطق جایگذاری را مستقیماً به سیستم CSS و Layout مرورگر منتقل کند.

مفهوم Anchor چیست؟

Anchor همان عنصری است که عنصر شناور قرار است نسبت به آن موقعیت بگیرد.

مثلاً در یک منوی Dropdown:

[ منوی محصولات ]  ← Anchor

        ↓

┌─────────────────────┐
│ موبایل              │
│ لپ‌تاپ               │
│ لوازم جانبی          │
└─────────────────────┘
     Dropdown

دکمه یا لینک «منوی محصولات» Anchor است و منوی بازشونده عنصر Anchor-Positioned محسوب می‌شود.

anchor-name چیست؟

برای تعریف یک عنصر به‌عنوان Anchor می‌توان از ویژگی anchor-name استفاده کرد.

مثلاً:

.button {
  anchor-name: --my-button;
}

در این مثال نام Anchor برابر --my-button است. نام‌های Anchor معمولاً با دو خط تیره شروع می‌شوند و به شکل یک Custom Identifer استفاده می‌شوند.

position-anchor چیست؟

حالا باید عنصر دیگری را به Anchor متصل کنیم. برای این کار می‌توان از position-anchor استفاده کرد:

.tooltip {
  position-anchor: --my-button;
}

با این کار مشخص می‌کنیم که Anchor پیش‌فرض این عنصر، همان عنصری است که anchor-name: --my-button دارد.

خود این ارتباط به‌تنهایی جای عنصر را مشخص نمی‌کند؛ هنوز باید بگوییم Tooltip دقیقاً کجا و در چه موقعیتی نسبت به Anchor قرار بگیرد.

position-area چیست؟

یکی از ساده‌ترین روش‌ها برای تعیین محل عنصر نسبت به Anchor استفاده از position-area است. می‌توان این سیستم را مانند یک جدول ۳×۳ تصور کرد که Anchor در خانه مرکزی قرار دارد.

┌─────────┬─────────┬─────────┐
│  بالا   │  بالا   │  بالا   │
├─────────┼─────────┼─────────┤
│  چپ     │  Anchor │  راست   │
├─────────┼─────────┼─────────┤
│  پایین  │  پایین  │  پایین  │
└─────────┴─────────┴─────────┘

در نتیجه می‌توان گفت عنصر موردنظر در سمت بالا، پایین، چپ یا راست Anchor قرار بگیرد.

برای مثال:

.tooltip {
  position-area: bottom;
}

این کد Tooltip را در ناحیه پایین Anchor قرار می‌دهد.

ساخت Tooltip با Anchor Positioning

حالا می‌توانیم یک نمونه ساده و واقعی بسازیم.

HTML:

<button class="help-button">?</button>

<div class="tooltip">
  اینجا توضیح بیشتری قرار می‌گیرد.
</div>

CSS:

.help-button {
  anchor-name: --help-button;
}

.tooltip {
  position: fixed;
  position-anchor: --help-button;
  position-area: bottom;
  margin-top: 8px;
}

در این مثال، دکمه Anchor است و Tooltip پایین آن قرار می‌گیرد.

چرا position: fixed یا absolute اهمیت دارد؟

Anchor Positioning برای عناصر Position شده طراحی شده است. به همین دلیل عنصر وابسته معمولاً با position: absolute یا position: fixed مورد استفاده قرار می‌گیرد. این مسئله مهم است چون Anchor Positioning قرار نیست نحوه چیدمان معمولی عناصر در Flow صفحه را تغییر دهد؛ بلکه برای جایگذاری عناصر خاص نسبت به Anchor طراحی شده است.

استفاده از anchor() برای کنترل دقیق‌تر

اگر بخواهید کنترل دقیق‌تری نسبت به position-area داشته باشید، می‌توانید از تابع anchor() استفاده کنید.

مثلاً:

.tooltip {
  position: absolute;
  position-anchor: --help-button;
  top: anchor(bottom);
  left: anchor(left);
}

در اینجا top نسبت به لبه پایین Anchor و left نسبت به لبه چپ Anchor تعیین می‌شود. این روش زمانی مفید است که نیاز دارید موقعیت عنصر را بسیار دقیق‌تر کنترل کنید.

anchor-center چیست؟

در برخی طراحی‌ها نمی‌خواهیم عنصر فقط از لبه چپ یا راست Anchor شروع شود؛ بلکه می‌خواهیم مرکز عنصر نسبت به Anchor قرار بگیرد. برای این نوع سناریو می‌توان از قابلیت‌های مربوط به anchor-center استفاده کرد.

برای مثال:

.tooltip {
  position-anchor: --help-button;
  top: anchor(bottom);
  justify-self: anchor-center;
}

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

بزرگ‌ترین مزیت: مدیریت فضای کم

فرض کنید یک Tooltip در حالت عادی باید زیر یک دکمه قرار بگیرد. اما دکمه به لبه پایین صفحه نزدیک شده است:

┌──────────────────────┐
│                      │
│                      │
│                      │
│                      │
│                  [ ? ]│
│                  ┌────┴─────────┐
│                  │   Tooltip    │
│                  │ خارج صفحه؟   │
└──────────────────┴──────────────┘

در روش‌های قدیمی، JavaScript معمولاً باید تشخیص دهد که فضای کافی وجود ندارد و Tooltip را به سمت بالا منتقل کند.

Anchor Positioning برای چنین شرایطی مفهوم Fallback Position دارد.

Fallback Position چیست؟

می‌توان چند حالت جایگزین برای قرارگیری عنصر تعریف کرد.

مثلاً:

اول پایین Anchor را امتحان کن؛ اگر جا نبود، بالا را امتحان کن.

.tooltip {
  position: fixed;
  position-anchor: --help-button;
  position-area: bottom;
  position-try-fallbacks: --top-position;
}

@position-try --top-position {
  position-area: top;
}

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

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

چرا Fallback خیلی مهم است؟

رابط‌های کاربری واقعی همیشه در وسط صفحه نمایش داده نمی‌شوند.

ممکن است عنصر Anchor:

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

بنابراین Tooltip یا Popup نباید فقط در یک جهت ثابت قرار بگیرد.

Fallback باعث می‌شود طراحی در شرایط مختلف انعطاف‌پذیرتر باشد.

@position-try چیست؟

برای ساخت گزینه‌های جایگزین سفارشی می‌توان از @position-try استفاده کرد.

برای مثال:

@position-try --top {
  position-area: top;
}

@position-try --left {
  position-area: left;
}

@position-try --right {
  position-area: right;
}

سپس این حالت‌ها را می‌توان به‌عنوان گزینه‌های جایگزین به عنصر Anchor-Positioned اختصاص داد.

.tooltip {
  position-try-fallbacks: --top, --left, --right;
}

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

position-try-order چه کاری انجام می‌دهد؟

Anchor Positioning قابلیت دیگری به نام position-try-order نیز دارد.

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

برای نمونه:

position-try-order: most-height;

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

ساخت Dropdown بدون محاسبه موقعیت با JavaScript

یکی از سناریوهای مناسب برای Anchor Positioning، ساخت منوی Dropdown است.

مثلاً:

<button class="menu-button">
  محصولات
</button>

<div class="dropdown">
  <a href="#">موبایل</a>
  <a href="#">لپ‌تاپ</a>
  <a href="#">لوازم جانبی</a>
</div>

CSS اصلی:

.menu-button {
  anchor-name: --menu-button;
}

.dropdown {
  position: fixed;
  position-anchor: --menu-button;
  position-area: bottom;
  margin-top: 6px;
}

JavaScript همچنان می‌تواند برای باز و بسته کردن منو استفاده شود، اما دیگر لازم نیست صرفاً برای محاسبه مختصات X و Y وارد ماجرا شود.

آیا Anchor Positioning یعنی دیگر به JavaScript نیاز نداریم؟

خیر.

این یکی از مهم‌ترین نکاتی است که نباید درباره این قابلیت اشتباه برداشت شود. Anchor Positioning وظیفه اصلی خود را در حوزه جایگذاری و Layout انجام می‌دهد. اما ممکن است همچنان برای مواردی مانند موارد زیر به JavaScript نیاز داشته باشید:

• باز و بسته کردن Dropdown
• مدیریت State برنامه
• دریافت اطلاعات از API
• اعتبارسنجی فرم
• تعاملات پیچیده کاربر
• منطق اختصاصی یک برنامه

پس هدف اصلی این فناوری حذف JavaScript نیست؛ بلکه کاهش نیاز به JavaScript برای محاسبات مربوط به موقعیت‌دهی عناصر است.

Anchor Positioning چه تفاوتی با position: absolute دارد؟

position: absolute به‌تنهایی اجازه می‌دهد یک عنصر نسبت به Containing Block مناسب خود موقعیت‌دهی شود. اما Anchor Positioning یک مفهوم مشخص‌تر ایجاد می‌کند: این عنصر را نسبت به یک عنصر دیگر قرار بده. در نتیجه دیگر لازم نیست برای هر Tooltip یا Popup یک ساختار والد پیچیده برای تعیین موقعیت ایجاد کنیم یا با JavaScript مختصات عناصر را محاسبه کنیم.

Anchor Positioning و Responsive Design

یکی از جذاب‌ترین ویژگی‌های Anchor Positioning برای طراحی Responsive، امکان تطبیق بهتر عناصر شناور با وضعیت صفحه است.

فرض کنید روی دسکتاپ Tooltip در سمت راست دکمه قرار می‌گیرد، اما روی موبایل فضای کافی برای آن وجود ندارد.

با استفاده از موقعیت‌های جایگزین می‌توان منطق انعطاف‌پذیرتری طراحی کرد.

موقعیت اصلی
      ↓
    راست
      ↓
فضا کافی نیست؟
      ↓
    بالا
      ↓
فضا کافی نیست؟
      ↓
    پایین

این موضوع مخصوصاً در رابط‌های کاربری کوچک و موبایلی اهمیت دارد.

Anchor Positioning برای Tooltip چه مزیتی دارد؟

Tooltip معمولاً باید به یک عنصر مشخص «چسبیده» به نظر برسد. در روش سنتی ممکن است JavaScript مختصات عنصر را گرفته و موقعیت Tooltip را تعیین کند. با Anchor Positioning می‌توان رابطه بین دو عنصر را در CSS تعریف کرد و جایگذاری را بر اساس همان رابطه انجام داد.

این مدل از نظر مفهومی بسیار تمیزتر است:

Button
  │
  │ Anchor
  ↓
Tooltip

آیا می‌توان چند Anchor داشت؟

بله. یک عنصر می‌تواند با توجه به طراحی برنامه به Anchorهای مختلفی مرتبط باشد و قابلیت Anchor Positioning امکاناتی برای کار با نام‌های Anchor مختلف فراهم می‌کند. این مسئله در رابط‌هایی که یک Popup باید نسبت به عناصر مختلف واکنش نشان دهد می‌تواند مفید باشد. البته هرچه معماری پیچیده‌تر باشد، بهتر است ارتباط بین عناصر به شکل روشن و قابل نگهداری طراحی شود.

آیا Anchor Positioning برای کارت‌ها و عناصر معمولی مناسب است؟

لزومی ندارد.

Anchor Positioning بیشتر برای عناصری جذاب است که نسبت به یک عنصر دیگر شناور هستند.

برای Layout معمولی هنوز ابزارهایی مانند:

• Flexbox
• CSS Grid
• Margin و Padding
• Positioning معمولی

انتخاب‌های اصلی هستند.

نباید هر مسئله Layout را با Anchor Positioning حل کرد.

کاربردهای مهم CSS Anchor Positioning

این فناوری را می‌توان در طراحی اجزای مختلف رابط کاربری بررسی کرد:

• Tooltip: نمایش توضیح کنار یک عنصر
• Dropdown: باز کردن منو زیر یا کنار دکمه
• Context Menu: نمایش منوی وابسته به یک عنصر
• Popup: باز کردن پنجره کوچک متصل به یک دکمه
• محدودیت‌های بصری: نمایش توضیح یا Badge نسبت به عناصر
• منوهای شناور: ساخت رابط‌های پیچیده‌تر بدون محاسبه دستی مختصات

Anchor Positioning چه کمکی به Performance می‌کند؟

نباید این تصور ایجاد شود که صرف استفاده از Anchor Positioning یک سایت را به‌طور خودکار سریع می‌کند. مزیت اصلی این قابلیت بیشتر در سادگی معماری و کاهش نیاز به منطق موقعیت‌دهی در JavaScript دیده می‌شود. در برنامه‌ای که قبلاً JavaScript دائماً اندازه و موقعیت عناصر را محاسبه می‌کرد، انتقال بخشی از این مسئولیت به CSS می‌تواند معماری ساده‌تری ایجاد کند. اما عملکرد نهایی به ساختار کل برنامه، تعداد عناصر، نحوه تغییر Layout و سایر کدهای شما نیز وابسته است.

آیا Anchor Positioning در همه مرورگرها کار می‌کند؟

این قابلیت نسبت به گذشته وضعیت بسیار بهتری پیدا کرده است. مستندات فعلی MDN برخی ویژگی‌های اصلی Anchor Positioning مانند anchor-name، position-anchor و position-area را برای مرورگرها و دستگاه‌های جدید در محدوده Baseline 2026 قرار داده‌اند. همچنین @position-try و قابلیت‌های مربوط به Position Fallback نیز در مرورگرهای جدیدتر در دسترس هستند.

با این حال، عبارت «Baseline 2026» به معنی پشتیبانی از تمام مرورگرهای قدیمی نیست. اگر سایت شما کاربران زیادی با مرورگرهای قدیمی دارد، باید قابلیت را آزمایش کنید و برای بخش‌های مهم رابط کاربری، Fallback مناسب داشته باشید.

آیا هنوز باید برای Browserهای قدیمی Fallback داشته باشیم؟

اگر پروژه شما گسترده و عمومی است، پاسخ معمولاً بله است. می‌توانید برای مرورگرهای جدید از Anchor Positioning استفاده کنید و برای محیط‌های قدیمی‌تر یک رفتار پایه با CSS معمولی یا JavaScript داشته باشید. برای مثال، می‌توان ابتدا یک Dropdown معمولی ساخت و سپس با Feature Detection و پشتیبانی مرورگر، قابلیت‌های پیشرفته Anchor Positioning را فعال کرد.

یک اشتباه رایج در استفاده از Anchor Positioning

یکی از اشتباهات این است که توسعه‌دهنده تصور کند فقط با نوشتن:

anchor-name: --button;

عنصر دیگر به‌صورت خودکار در جای مناسب قرار می‌گیرد.

در واقع Anchor Positioning چند بخش مفهومی دارد:

1. تعریف Anchor
2. ایجاد ارتباط با Anchor
3. مشخص کردن موقعیت
4. در صورت نیاز تعریف موقعیت‌های جایگزین

مثلاً:

Anchor
→ anchor-name

Association
→ position-anchor

Location
→ position-area یا anchor()

وقتی این مفاهیم را از هم جدا کنیم، درک فناوری بسیار ساده‌تر می‌شود.

آیا Anchor Positioning جای کتابخانه‌های Positioning را می‌گیرد؟

در بعضی پروژه‌ها می‌تواند نیاز به بخشی از منطق کتابخانه‌های قدیمی را کاهش دهد، اما این به معنی حذف تمام کتابخانه‌ها نیست.

کتابخانه‌های Positioning ممکن است قابلیت‌های بسیار بیشتری داشته باشند؛ برای مثال مدیریت تعامل، Accessibility، رویدادها، هماهنگی با کامپوننت‌های پیچیده و سازگاری گسترده با محیط‌های مختلف. بنابراین بهتر است قبل از حذف یک کتابخانه، بررسی کنید دقیقاً چه امکاناتی از آن در پروژه استفاده می‌شود.

یک الگوی ساده برای تصمیم‌گیری

می‌توان برای انتخاب روش مناسب، این سؤال را مطرح کرد:

آیا فقط Layout معمولی داریم؟
        ↓
      بله
        ↓
Flexbox / Grid

آیا یک عنصر باید نسبت به عنصر دیگری شناور باشد؟
        ↓
      بله
        ↓
Anchor Positioning را بررسی کن

آیا منطق تعاملی پیچیده داریم؟
        ↓
      بله
        ↓
CSS + JavaScript

Anchor Positioning و آینده طراحی وب

یکی از جهت‌گیری‌های جالب CSS مدرن این است که مرورگر مسئولیت بیشتری از Layout و رفتارهای مرتبط با رابط کاربری را مستقیماً در اختیار توسعه‌دهنده قرار دهد. Anchor Positioning نمونه خوبی از همین روند است. به‌جای اینکه برای هر رفتار ساده رابط کاربری، اندازه و مختصات عناصر را با JavaScript محاسبه کنیم، بخشی از رابطه بین عناصر را به خود CSS می‌سپاریم. این موضوع به‌خصوص برای طراحی کامپوننت‌های قابل استفاده مجدد اهمیت دارد.

جمع‌بندی

CSS Anchor Positioning یکی از قابلیت‌های جدید و مهم CSS برای جایگذاری عناصر نسبت به یک عنصر دیگر است. با این فناوری می‌توان یک عنصر را به‌عنوان Anchor تعریف کرد و عناصری مانند Tooltip، Dropdown، Popup و منوهای شناور را نسبت به آن قرار داد.

ویژگی‌هایی مانند anchor-name و position-anchor ارتباط بین عناصر را مشخص می‌کنند، در حالی که position-area و تابع anchor() برای تعیین موقعیت مورد استفاده قرار می‌گیرند. یکی از جذاب‌ترین بخش‌های این فناوری، امکان تعریف Fallback Position است؛ یعنی اگر فضای کافی برای موقعیت اصلی وجود نداشت، مرورگر بتواند گزینه جایگزین را امتحان کند.

با وجود این قابلیت‌ها، Anchor Positioning قرار نیست JavaScript را از وب حذف کند. هدف اصلی آن این است که بخشی از مشکلات مربوط به موقعیت‌دهی عناصر را ساده‌تر کنیم و منطق Layout را بیشتر به CSS بسپاریم. برای پروژه‌های جدید، به‌خصوص رابط‌های کاربری مدرن و Responsive، ارزش دارد که این قابلیت را بشناسیم و در جاهایی که واقعاً مناسب است از آن استفاده کنیم.