---
title: 'بدائل CSS Anchor Positioning: دليل الـ Auto-Flip لعام (2026)'
description: إزاي تخلي الـ dropdowns والـ tooltips المثبتة بـ CSS تتقلب وتختفي لما تخرج بره المساحة المتاحة باستخدام position-try-fallbacks و @position-try. دليل 2026 شغال cross-browser.
url: https://nerdleveltech.com/ar/css-anchor-positioning-fallbacks
language: ar
date: '2026-06-18'
category: frontend
tags:
  - css anchor positioning
  - position-try-fallbacks
  - '@position-try'
  - position-area
  - dropdown
  - frontend
  - css
markdown_url: https://nerdleveltech.com/ar/css-anchor-positioning-fallbacks.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/ar/css-anchor-positioning-fallbacks'
terms: https://nerdleveltech.com/llms.txt
---

# بدائل CSS Anchor Positioning: دليل الـ Auto-Flip لعام (2026)

لجعل عنصر CSS مثبت (anchored) يتقلب تلقائيًا عندما يتجاوز حدود نافذة العرض (viewport)، أضف `position-try-fallbacks` إلى العنصر المحدد مع قيمة واحدة أو أكثر من قيم `<try-tactic>` مثل `flip-block`، أو `flip-inline`، أو `flip-block flip-inline`. يحافظ المتصفح على موضعه الافتراضي طالما كان مناسبًا للمساحة، ولا ينتقل إلى الوضع الاحتياطي إلا عندما يوشك العنصر على الخروج عن الحدود.

## ملخص

يتيح لك تحديد موضع الإرساء (CSS anchor positioning) ربط القوائم المنسدلة، أو تلميحات الأدوات (tooltips)، أو النوافذ المنبثقة (popovers) بنقطة إرساء باستخدام CSS فقط. الجزء الصعب — وهو إبقاء العنصر داخل الشاشة — يتم حله بواسطة `position-try-fallbacks` وقاعدة `@position-try`، اللذان يجربان مواضع بديلة فقط عندما يتجاوز الموضع الافتراضي الحدود. اعتبارًا من عام 2026، أصبحت هذه الميزة مدعومة في Chrome/Edge 125+، و Firefox 147+، و Safari 26+ (حوالي 83% من المستخدمين)، لذا يمكنك استخدامها مع وضع أساسي معقول لبقية المستخدمين. يشرح هذا الدليل كيفية بناء قائمة منسدلة تتقلب تلقائيًا، ويوضح سبب عدم تفعيل البدائل أحيانًا، ويضيف إخفاءً مشروطًا باستخدام `position-visibility`.

## ما ستتعلمه

- كيف يقوم `position-try-fallbacks` بقلب العنصر المثبت بعيدًا عن حافة نافذة العرض
- لماذا لا تعمل البدائل (fallbacks) الخاصة بك (والحل الوحيد الذي يعالج معظم الحالات)
- كتابة بديل `@position-try` مخصص للتحكم الدقيق
- الفرق بين `position-area` ودالة `anchor()`
- إخفاء العنصر المثبت باستخدام `position-visibility` عندما يختفي مرساه (anchor) أثناء التمرير
- صورة دعم المتصفحات المؤكدة لعام 2026، بما في ذلك Safari و `@position-try`

## كيف أجعل عنصر CSS مثبتًا يتقلب عندما يتجاوز الحدود؟

أضف `position-try-fallbacks` إلى العنصر المحدد وادرج المواضع التي يمكن للمتصفح تجربتها عندما يتجاوز الموضع الافتراضي الحدود. يستخدم المتصفح موضعك الأساسي أولاً، ولا يطبق البديل إلا عند التجاوز — لا تُستخدم البدائل أبدًا طالما كان العنصر مناسبًا للمساحة.

ابدأ بمرسى (anchor) بسيط وقائمة منسدلة محددة الموضع. يحصل المرسى على `anchor-name`؛ وتشير القائمة المنسدلة إليه باستخدام `position-anchor` وتضع نفسها باستخدام `position-area`:

```css
.menu-button {
  anchor-name: --menu-btn;
}

.menu {
  position: absolute;
  position-anchor: --menu-btn;
  /* الموضع الأساسي: مباشرة أسفل الزر، مع محاذاة الحواف اليسرى. */
  position-area: bottom span-right;
  margin-top: 6px;

  /* إذا تجاوز الموضع "بالأسفل" الحدود، جرب هذه الخيارات بالترتيب حتى يناسب أحدها المساحة. */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
```

القيم الثلاث المحددة مسبقًا لـ `<try-tactic>` هي `flip-block` (يقلب الموضع على طول محور الكتلة — الأسفل يصبح أعلى)، و `flip-inline` (يقلب على طول المحور المضمن — اليمين يصبح يسارًا)، و `flip-start` (يعكس عبر محور قطري، مبدلاً اتجاهات الكتلة والمضمن).[^mdn-fallbacks] يمكنك الجمع بين اثنين في خيار واحد مفصول بمسافة، مثل `flip-block flip-inline`، للقلب قطريًا. تقوم المتصفحات بتقييم القائمة من اليسار إلى اليمين وتختار الخيار الأول الذي يبقي العنصر بالكامل داخل الشاشة.

## الأخطاء الشائعة: لماذا لا يعمل position-try-fallbacks؟

السبب الأكثر شيوعًا هو أنك أعطيت المتصفح تقلبات في محور واحد فقط. إذا كان المرسى يقع بالقرب من زاوية، فقد يتجاوز العنصر الحدود في *كلا* الاتجاهين في وقت واحد، ولا يحل `flip-block` ولا `flip-inline` وحدهما هذه المشكلة — فأنت بحاجة أيضًا إلى خيار `flip-block flip-inline` المدمج.[^mdn-fallbacks] وهذا هو بالضبط سبب إدراج الخيارات الثلاثة في المثال أعلاه.

هناك أمران آخران قد يسببان ارتباكًا. أولاً، لا يتم تفعيل البدائل إلا عند تجاوز الحدود: إذا كان العنصر مناسبًا في مكانه الافتراضي، فسيتم تجاهل القائمة تمامًا، مما قد يبدو وكأن "لا شيء حدث". ثانيًا، قد يكون كود CSS الخاص بك قديمًا قبل إعادة التسمية في عام 2024. كانت الخاصية تسمى سابقًا `position-try-options` وكان `position-area` يسمى سابقًا `inset-area`؛ تم تغيير اسميهما، لذا فإن الأكواد القديمة لا تفعل شيئًا في المتصفحات الحالية.[^chrome-rename] استخدم الأسماء الحالية: `position-try-fallbacks` و `position-area`.

## كيف أكتب بديل @position-try مخصص؟

استخدم قاعدة `@position-try` لتعريف موضع مسمى، ثم أشر إلى هذا الاسم في `position-try-fallbacks`. يمنحك هذا تحكمًا لا توفره التكتيكات المحددة مسبقًا، مثل تعديل الهوامش (margins) أو تغيير أي حواف داخلية ترتبط بأي جانب:

```css
@position-try --above {
  top: auto;
  bottom: anchor(top);
  margin-top: 0;
  margin-bottom: 6px;
}

@position-try --shift-left {
  position-area: bottom span-left;
}

.menu {
  position: absolute;
  position-anchor: --menu-btn;
  position-area: bottom span-right;
  margin-top: 6px;

  position-try-fallbacks: --above, --shift-left;
}
```

يبدأ كل اسم `@position-try` بشرطتين (وهو `<dashed-ident>`). يمكنك مزج الأسماء المخصصة والتكتيكات المحددة مسبقًا في خيار بديل واحد — عندما تفعل ذلك، يتم تطبيق الخيار المخصص أولاً ثم يتم تطبيق تحويل التكتيك فوقه.[^mdn-fallbacks] إذا كان الاسم في القائمة لا يطابق أي قاعدة `@position-try`، فسيتم تخطي هذا الإدخال ببساطة، وهو سبب صامت آخر لعدم "عمل" البديل.

## ما الفرق بين position-area ودالة anchor()؟

`position-area` هي الطريقة السريعة القائمة على الشبكة لوضع عنصر؛ أما `anchor()` فهي الطريقة الدقيقة القائمة على الحواف. كلاهما يحل نفس المشكلة بمستويات مختلفة من التحكم.

تتعامل `position-area` مع المرسى كخلية مركزية في شبكة 3×3 ضمنية وتسمح لك بوضع العنصر في بلاطة واحدة أو أكثر باستخدام كلمات رئيسية مثل `top`، أو `bottom span-right`، أو `bottom span-all`. الصفوف هي `top`/`center`/`bottom` (منطقياً: `block-start`/`center`/`block-end`) والأعمدة هي `left`/`center`/`right` (منطقياً: `start`/`center`/`end`).[^mdn-posarea] وهي تغطي معظم حالات القوائم المنسدلة وتلميحات الأدوات في سطر واحد.

توضع دالة `anchor()` داخل خصائص الإزاحة (`top`، `left`، `inset-block-start`، وما إلى ذلك) وتعيد طولاً عند حافة محددة للمرسى، مثل `bottom: anchor(top)` أو `left: anchor(right)`. وهي تقبل الجوانب الفيزيائية، والجوانب المنطقية (`start`، `end`، `self-start`، `self-end`)، و `center`.[^mdn-anchor] استخدم `anchor()` عندما تحتاج إلى التثبيت بحافة دقيقة أو الموضع بالنسبة لأكثر من مرسى واحد؛ واستخدم `position-area` عندما تكون خلية الشبكة كافية.

## كيف أخفي عنصرًا مثبتًا عندما يختفي مرساه عن الشاشة أثناء التمرير؟

استخدم خاصية `position-visibility`. فهي تخفي العنصر المحدد الموضع بشكل مشروط بناءً على التجاوز أو رؤية المرسى، وهو أمر مفيد عندما يطفو تلميح الأداة في مساحة فارغة بعد خروج مرساه من الحاوية أثناء التمرير:

```css
.menu {
  position: absolute;
  position-anchor: --menu-btn;
  position-area: bottom span-right;

  /* إخفاء القائمة تمامًا بمجرد قص الزر بالكامل. */
  position-visibility: anchors-visible;
}
```

تحتوي `position-visibility` على ثلاث قيم: `always` (الافتراضي — يظهر دائمًا)، و `no-overflow` (يخفي العنصر تمامًا عندما يبدأ في تجاوز حاويته أو نافذة العرض)، و `anchors-visible` (يخفيه تمامًا عندما يتم إخفاء المرسى تمامًا بسبب التجاوز أو التغطية).[^mdn-hiding] هذه الخاصية أحدث من خصائص الإرساء الأساسية ولا تزال قيد الاستقرار عبر المحركات، لذا تعامل معها كتحسين تدريجي (progressive enhancement) وتحقق من الدعم قبل الاعتماد عليها في الإنتاج.

## هل يدعم Safari خاصية CSS anchor positioning و @position-try؟

نعم. أطلق Safari خاصية CSS anchor positioning — بما في ذلك قاعدة `@position-try` و `position-try-fallbacks` — في إصدار Safari 26.0 (الصادر في سبتمبر 2025)، لكل من macOS و iOS.[^caniuse][^webkit] الإرشادات القديمة التي تقول "Safari يدعم `anchor()` ولكن ليس `@position-try`" تصف حقبة معاينة Safari 18.x التجريبية وأصبحت الآن قديمة؛ النسخة المستقرة تدعم آلية البدائل (fallback).

ومع ذلك، فإن أي شخص يستخدم Safari 18.7 أو أقدم لا يملك خاصية anchor positioning على الإطلاق، لذا لا يزال وضع موضع أساسي احتياطي أمراً مهماً (انظر قسم المتصفحات أدناه).

## هل CSS anchor positioning جاهزة للاستخدام الفعلي في 2026؟

بالنسبة لمعظم الجمهور، نعم — مع وجود خطة احتياطية للمتصفحات القديمة. وفقاً لموقع caniuse، الميزة مدعومة افتراضياً في Chrome و Edge 125+، و Safari 26.0+، و Firefox 147+، و Opera 111+، و Samsung Internet 27+، لتصل إلى حوالي 83% من المستخدمين العالميين اعتباراً من أبريل 2026.[^caniuse]

| المتصفح              | أول إصدار بدعم افتراضي |
| -------------------- | ---------------------- |
| Chrome               | 125                    |
| Edge                 | 125                    |
| Firefox              | 147 (مستقر 2026-01-13) |
| Safari (macOS + iOS) | 26.0                   |
| Opera                | 111                    |
| Samsung Internet     | 27                     |

كان Firefox هو آخر المحركات الرئيسية التي اعتمدتها: الإصدارات 145–146 كانت تحتوي عليها خلف تفضيل `layout.css.anchor-positioning.enabled`، وقام الإصدار 147 بتفعيلها افتراضياً.[^caniuse][^moz-bug] الخلاصة العملية هي أن anchor positioning خيار ممتاز للعمل الجديد اليوم، طالما أن مستخدمي Firefox قبل 147 أو Safari قبل 26 لا يزالون يرون تخطيطاً قابلاً للاستخدام.

## كيف أحافظ على قابليتها للاستخدام في المتصفحات التي لا تدعم anchor positioning؟

اجعل موضعك الأساسي خارج أي كتلة `@position-try`، واترك البدائل تضيف فقط تحسين الانعكاس (flip). المتصفحات التي لا تفهم anchor positioning ستتجاهل الخصائص غير المعروفة وتعود إلى تحديد الموضع العادي، لذا سيظل العنصر يظهر في مكان منطقي:

```css
.menu {
  /* Plain CSS fallback for engines with no anchor positioning. */
  position: absolute;
  top: 100%;
  left: 0;

  /* Progressive enhancement for engines that support it. */
  position-anchor: --menu-btn;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}
```

بالنسبة للفرق التي تحتاج إلى عمل التثبيت (anchoring) على المتصفحات القديمة، توفر OddBird مكتبة polyfill لـ CSS anchor positioning تعوض هذا السلوك؛ استخدمها مع التحسين التدريجي بدلاً من إرسالها لكل زائر.[^polyfill] تجربة الانعكاس عبر `@position-try` تتكامل أيضاً بشكل طبيعي مع Popover API (سمة `popover` بالإضافة إلى `popovertarget`)، والتي أصبحت Baseline منذ يناير 2025 وتتولى العرض في الطبقة العليا (top-layer)، ومفتاح Escape، والإغلاق عند النقر في الخارج (light-dismiss) نيابة عنك.[^popover]

## الأسئلة الشائعة

**كيف أجعل عنصر CSS مثبت ينعكس عندما يتجاوز الحدود؟** أضف `position-try-fallbacks` إلى العنصر المحدد الموضع وادرج المواضع مثل `flip-block, flip-inline, flip-block flip-inline`. يحافظ المتصفح على الموضع الافتراضي طالما أنه مناسب وينتقل إلى أول بديل يتجنب تجاوز الحدود.

**لماذا لا تعمل position-try-fallbacks الخاصة بي؟** عادةً لأنك أدرجت انعكاسات أحادية المحور فقط، لذا فإن تجاوز الحدود عند الزوايا ليس له بديل صالح — أضف خيار `flip-block flip-inline` المشترك. تأكد أيضاً من أن العنصر يتجاوز الحدود بالفعل (البدائل لا تعمل أبداً بخلاف ذلك) وأنك تستخدم أسماء الخصائص الحالية، وليس الأسماء التي تم تغييرها مثل `position-try-options` أو `inset-area`.

**ما الفرق بين position-area و anchor()؟** تضع `position-area` العنصر على شبكة 3×3 حول المرساة (anchor) باستخدام كلمات رئيسية مثل `bottom span-right` — وهي سريعة وتغطي معظم الحالات. بينما توضع `anchor()` داخل خصائص الإزاحة (inset) للتثبيت بحافة مرساة محددة، مثل `bottom: anchor(top)` — وهي أكثر دقة وتدعم مراسي متعددة.

**هل يدعم Safari خاصية @position-try؟** نعم، منذ إصدار Safari 26.0 (سبتمبر 2025) على macOS و iOS. النصائح السابقة التي تقول "Safari يفتقر إلى @position-try" تشير إلى فترة المعاينة 18.x التجريبية وهي قديمة.

**كيف أخفي عنصراً مثبتاً عندما تختفي مرساته عن الشاشة عند التمرير؟** استخدم `position-visibility: anchors-visible` لإخفاء العنصر بمجرد قص المرساة بالكامل، أو `no-overflow` لإخفائه عندما يتجاوز العنصر نفسه الحدود. هذه الخاصية أحدث من الخصائص الأساسية، لذا تحقق من الدعم قبل الاعتماد عليها.

**هل CSS anchor positioning جاهزة للاستخدام الفعلي في 2026؟** لحوالي 83% من المستخدمين نعم — Chrome/Edge 125+، و Firefox 147+، و Safari 26+ جميعها تدعمها افتراضياً. وفر موضعاً أساسياً بـ CSS عادي (أو polyfill من OddBird) لمتصفحات Firefox و Safari الأقدم.

## الخلاصة

تجعل خاصية CSS anchor positioning أخيراً مهمة "إبقاء هذه القائمة المنسدلة على الشاشة" مشكلة تنسيق بدلاً من كونها مشكلة JavaScript. ادرج بضعة `position-try-fallbacks`، وتضمن خيار القطر `flip-block flip-inline`، وحدد `@position-try` مخصصاً عندما تحتاج إلى تحكم دقيق، وأضف `position-visibility` لإخفاء العناصر التي تبتعد مراسيها عند التمرير. ثبت موضعاً أساسياً بسيطاً بحيث يظل Firefox قبل 147 و Safari قبل 26 يعرضان المحتوى بشكل نظيف، وبذلك ستحصل على حل قوي يعتمد بشكل أساسي على CSS.

إذا كنت تبني واجهة مستخدم حديثة باستخدام CSS، فراجع أدلتنا المصاحبة حول [بدء استخدام تخطيط وعرض CSS](https://nerdleveltech.com/introduction-to-css-presentation-part-1)، وإطلاق [الوضع الداكن في Tailwind v4](https://nerdleveltech.com/tailwind-v4-dark-mode) بدون وميض، وتصحيح أخطاء [View Transitions API عندما لا تعمل](https://nerdleveltech.com/React-viewtransition-not-working).

[^mdn-fallbacks]: MDN Web Docs — "position-try-fallbacks". <https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-fallbacks>

[^chrome-rename]: Chrome for Developers — "Anchor positioning syntax changes" (inset-area → position-area; position-try-options → position-try-fallbacks). <https://developer.chrome.com/blog/anchor-syntax-changes>

[^mdn-posarea]: MDN Web Docs — "position-area". <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-area>

[^mdn-anchor]: MDN Web Docs — "دالة anchor() في CSS". <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor>

[^mdn-hiding]: MDN Web Docs — "خيارات التراجع والإخفاء الشرطي للتجاوز" (position-visibility). <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Try_options_hiding>

[^caniuse]: Can I use — "CSS Anchor Positioning" (الاستخدام العالمي \~82.83%، StatCounter أبريل 2026). <https://caniuse.com/css-anchor-positioning>

[^webkit]: WebKit — "ميزات WebKit في Safari 26.0" (2025-09-15). <https://webkit.org/blog/17333/webkit-features-in-safari-26-0/>

[^moz-bug]: Mozilla Bugzilla 1988225 — "تفعيل تفضيل تحديد المواقع بالإرساء (layout.css.anchor-positioning.enabled) افتراضياً على جميع القنوات". <https://bugzilla.mozilla.org/show_bug.cgi?id=1988225>

[^polyfill]: OddBird — CSS Anchor Positioning Polyfill. <https://GitHub.com/oddbird/css-anchor-positioning>

[^popover]: web.dev — "واجهة Popover API أصبحت الآن متاحة حديثاً في Baseline". <https://web.dev/blog/popover-baseline>