Magdy Atef Zahran

Positioning in Tailwind (Absolute – Relative – Fixed – Sticky)

Positioning – من أهم الحاجات اللي لازم تبقى فاهمها كويس عشان تتحكم في أماكن العناصر جوه الصفحة.
Tailwind بيديك Utilities جاهزة تخليك تعمل دا بسهولة من غير ما تكتب CSS بإيدك.

relative

العنصر بيكون المكان المرجعي للعناصر اللي جواه متـعـمّلة absolute
مش بيغير مكانه، بس بيخلي أي absolute جوه يتمركز بالنسبة له

<div class="relative w-64 h-64 bg-gray-200"> <div class="absolute top-2 right-2 bg-red-500 text-white p-2"> Absolute inside Relative </div> </div>

absolute

العنصر بيتحرك بالنسبة لأقرب عنصر relative (أو أول Parent عنده Position)
بتحدد مكانه بالـ utilities: top-*, bottom-*, left-*, right-*

<div class="relative w-64 h-64 bg-blue-200"> <div class="absolute bottom-0 left-0 bg-blue-600 text-white p-2"> Positioned Absolute </div> </div>

fixed

العنصر بيكون ثابت في الشاشة حتى لو عملت Scroll
بيتحدد مكانه بالنسبة للـ viewport

<div class="fixed bottom-4 right-4 bg-green-500 text-white p-3 rounded-lg"> Fixed Button </div>

(زي أزرار الـ “Back to top” أو الـ Floating Buttons)

sticky

العنصر بيبقى عادي، لكن أول ما توصله في Scroll بيقف “ملزوق” في مكانه
لازم تحدد اتجاه زي: top-0 أو bottom-0

<header class="sticky top-0 bg-white shadow p-4"> Sticky Navbar </header>

⚡ كمان:

Tailwind عندها Utilities لـ inset-0 (تخلي العنصر يملى مساحة كاملة)
وكمان أرقام زي top-1/2, left-1/2 عشان تعمل centering trick مع transform -translate-x-1/2 -translate-y-1/2

Borma