أهم شيء أثناء تصميم صفحات الويب هو الموضع الصحيح للعناصر. يمكن القيام بذلك بسهولة باستخدام فئات 'الموضع' في Tailwind. يمكن أن يكون تحديد المواقع من أنواع مختلفة، أحدها ثابت.
ستوضح هذه المدونة كيفية وضع العنصر بشكل ثابت.
كيفية وضع عنصر بشكل ثابت في DOM – Tailwind؟
يمكن تحديد موضع العنصر بشكل ثابت باستخدام ' ثابتة 'فئة الموقف. الموضع الثابت هو الموضع الافتراضي لعناصر HTML. العناصر ذات ' الموقف: ثابت ' يتم وضعها بناءً على التدفق الطبيعي للصفحة، دون أي نمط CSS.
بناء الجملة
بناء الجملة لتطبيق ' ثابتة 'الفصل هو:
هنا، يمكن أن يكون العنصر أي علامة يمكن تطبيق سمة الموضع عليها.
تفضل بزيارة الكود للتنفيذ العملي لتحديد المواقع الثابتة:
< جسم فصل = 'مركز النص' >< مركز >
< h1 فصل = 'نص-أخضر-600 نص-5xl الخط غامق' >
مثال الموقف الثابت
< / h1 >
< ب > فئة موضع Tailwind CSS< / ب >
< شعبة فصل = 'نص ثابت على اليسار p-2 m-2 bg-green-200 h-48' >
< ص فصل = 'الخط العريض' >وضعه ثابت< / ص >
< شعبة >العنصر المطلق< / ص >
< / شعبة >
< / شعبة >
< / مركز >
< / جسم >
في هذا الكود:
- ' مركز النص ” يقوم بضبط محتوى علامات في وسط الشاشة.
- تعيين ' <ح1> علامة إلى اللون الأخضر باستخدام ' النص-الأخضر-600 '، يتم ضبط حجم النص على خمس مرات بواسطة' النص-5×1 ' ويتم التأكيد على الخط باستخدام ' الخط غامق '.
- اثنين ' <ديف> 'يتم أيضًا إنشاء العناصر وتعيين موضع الجانب الأيسر الثابت لأول' شعبة ' باستخدام ' نص ثابت على اليسار '.
- تعيين فئات ' ص-2 '،' م-2 '،' بي جي-الأخضر-200 '،' ح-48 'للقسم الثاني وقم أيضًا بتعيين موضعه على أسفل اليسار المطلق باستخدام' القاع النسبي-0 اليسار-0 ' فصل.
انتاج |
احفظ الكود أعلاه في الملف وقم بمعاينة صفحة الويب التي أنشأها والتي ستظهر على النحو التالي:
يتحرك العنصر ذو الموضع الثابت مع تدفق الصفحة العادي بينما يحتفظ العنصر الآخر بموضعه المطلق.
خاتمة
لوضع عنصر بشكل ثابت في DOM مع التدفق الطبيعي للمستند، استخدم الزر ' ثابتة 'فئة الريح الخلفية' موضع ' جدوى. لقد أوضحت هذه المدونة كيفية وضع أي عنصر ' بشكل ثابت 'مع عرض عملي بسيط.