من تموضع العناصر في CSS إلى Tailwind

position:absolute → absolute. الجوانب → top/right/bottom/left. z-index مخصص → اختياري.

قواعد التموضع واضحة: يتحول position:absolute إلى absolute، وتأخذ كل إزاحة أداة الجهة المقابلة لها. وتُكتب قيم z-index الخارجة عن المقياس بصيغة حرة. المشكلات الحقيقية تأتي من sticky وسياق التراص وحالات overflow المقصوصة، وهي مواضع يجب تجربتها في المتصفح قبل النشر.

position والإزاحات

position:absolute → absolute؛ top/right/bottom/left → inset-* أو top-* عند التوافق مع المقياس.

z-index

z-index الشائعة → z-10 / z-50. قيم العلامة النادرة → z-[…].

sticky والتكديس

sticky + overflow على الأسلاف فخ كلاسيكي: تحقق من stacking context بعد التحويل.

جرّب

فتح المحوّل

.example { display: flex; gap: 1rem; padding: 1rem; }

ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.