Magdy Atef Zahran

Z-Index & Layering في Tailwind

واحد من أكتر الحاجات اللي بتلخبط في الـ CSS هو موضوع الـ z-index و ترتيب العناصر فوق بعض… Tailwind مخلي الموضوع أسهل بكتير.

🎯 الفكرة ببساطة

أي عنصر في الصفحة بيبقى في “طبقة” معينة
الـ z-index بيحدد ترتيب الطبقات (العالي يطلع فوق، والواطي ينزل تحت)
لازم يكون عندك position (relative, absolute, fixed, sticky) علشان الـ z-index يشتغل

🛠️ الـ Utilities في Tailwind

Tailwind جايبلك classes جاهزة:

z-0 = يخلي العنصر في طبقة صفرية
z-10, z-20, z-30, z-40, z-50 = قيم جاهزة بترتب العناصر فوق بعض.
z-auto = القيمة الافتراضية (بيمشي حسب السياق).

هتلاقي الأزرق فوق الأحمر، رغم إنهم في نفس المكان.

🎨 أمثلة عملية

Navbar فوق كل حاجة

<nav class="fixed top-0 left-0 w-full z-50 bg-white shadow"> Navbar </nav>

Modal يطلع فوق الصفحة كلها

<div class="fixed inset-0 bg-black/50 z-40"></div> <div class="fixed inset-0 flex items-center justify-center z-50"> <div class="bg-white p-8 rounded">Modal Content</div> </div>

Dropdown يظهر فوق العناصر التانية

<div class="relative"> <button class="px-4 py-2 bg-blue-500 text-white">Menu</button> <div class="absolute top-full mt-2 bg-white shadow z-20"> <p>Option 1</p> <p>Option 2</p> </div> </div>

💡 ملاحظات مهمة

متستخدمش قيم z-index عشوائية كبيرة (زي 99999 😅). Tailwind مجهزلك scale كفاية
الـ stacking context بيتغير لو فيه parent عنده transform, opacity, position… فخلي بالك
فكر دايمًا في “مين المفروض يطلع فوق؟” ونظم الكود على الأساس ده