PasteZap
🌐 العربية
مجاني · دون حساب

مجاني · التصميم وCSS

مختبر CSS anchor positioning.

ضع التلميحات والقوائم والنوافذ المنبثقة بجانب زر باستخدام CSS فقط عبر anchor positioning: الجهة والمسافة والبديل، مع معاينة حية.

قبل البدء

بعض عناصر التحكم التقنية باللغة الإنجليزية. تدعم النصوص Unicode، وتختلف صيغ الملفات ولغات النتائج حسب الأداة.

تظهر الحدود التقنية باللغة الإنجليزية أدناه. راجعها قبل معالجة الملفات الكبيرة أو استخدام النتيجة.

Loading the calculator…

طريقة الاستخدام: مختبر CSS anchor positioning

أدخل بياناتك أو اختر الملف. عدّل الخيارات ثم أنشئ النتيجة وراجعها قبل النسخ أو التنزيل.

الحدود والصيغ المدعومة

تُعالج بياناتك على جهازك.

ملاحظات تقنية بالإنجليزية

Needs a browser with anchor positioning (all major browsers since 2026). Everything is calculated in your browser; nothing you type is uploaded.

anchor-name marks the button, position-anchor ties the tooltip to it, position-area chooses the side and position-try-fallbacks switches sides when the tooltip would overflow.

position-area: top with a flip-block fallback keeps a tooltip above its button and moves it below when there is no room.