تخطَّ إلى المحتوى

🌬️ شرح Tailwind CSS

العرض والموضع

الدرس 14 من 25· ⏱ 1 دقائق قراءة

أنواع العرض

<div class="block">كتلة</div>
<span class="inline-block">سطري ككتلة</span>
<div class="hidden">مخفيّ</div>
<div class="flex">مرن</div>

الإخفاء المتجاوب

<div class="hidden md:block">يظهر على الحاسوب فقط</div>
<div class="md:hidden">يظهر على الجوّال فقط</div>

الموضع (Position)

<div class="relative">
  <div class="absolute top-0 left-0">في الزاوية</div>
</div>
<div class="fixed bottom-4 right-4">ثابت في الزاوية</div>
<header class="sticky top-0">يلتصق عند التمرير</header>

الطبقات z-index

<div class="z-10">فوق</div>
<div class="z-50">أعلى</div>

الفائض (Overflow)

<div class="overflow-hidden">يقصّ الزائد</div>
<div class="overflow-y-auto h-64">تمرير عمودي</div>
<div class="overflow-x-auto">تمرير أفقي للجداول</div>

🎯 التالي: التصميم المتجاوب.

هل كان هذا الدرس مفيدًا؟