ویب صفحات کو ڈیزائن کرتے وقت سب سے اہم چیز عناصر کی مناسب پوزیشننگ ہے۔ یہ Tailwind 'پوزیشن' کلاسز کا استعمال کرکے آسانی سے کیا جا سکتا ہے۔ پوزیشننگ مختلف اقسام کی ہو سکتی ہے ان میں سے ایک جامد ہے۔
یہ بلاگ یہ ظاہر کرے گا کہ عنصر کو مستحکم طور پر کیسے رکھا جائے۔
DOM – Tailwind میں کسی عنصر کو مستحکم طور پر کیسے رکھا جائے؟
'کا استعمال کرتے ہوئے ایک عنصر کو مستحکم طور پر پوزیشن میں رکھا جاسکتا ہے۔ جامد پوزیشن کی کلاس۔ جامد پوزیشن HTML عناصر کے لیے ڈیفالٹ پوزیشن ہے۔ عناصر کے ساتھ ' پوزیشن: جامد صفحہ کے عام بہاؤ کی بنیاد پر، بغیر کسی CSS اسٹائل کے پوزیشن میں ہیں۔
نحو
لاگو کرنے کے لئے نحو ' جامد 'کلاس ہے:
<عنصر کلاس = 'جامد' > ... < / عنصر>
یہاں، عنصر کوئی بھی ٹیگ ہو سکتا ہے جس پر پوزیشن کا وصف لاگو کیا جا سکتا ہے۔
جامد پوزیشننگ کے عملی نفاذ کے لیے کوڈ ملاحظہ کریں:
< جسم کلاس = 'متن کا مرکز' >< مرکز >
< h1 کلاس = 'text-green-600 text-5xl فونٹ بولڈ' >
جامد پوزیشن کی مثال
< / h1 >
< ب >ٹیل ونڈ سی ایس ایس پوزیشن کلاس< / ب >
< div کلاس = جامد متن-بائیں p-2 m-2 bg-green-200 h-48' >
< ص کلاس = 'فونٹ بولڈ' > جامد پوزیشن میں< / ص >
< div >مطلق پوزیشن شدہ عنصر< / ص >
< / div >
< / div >
< / مرکز >
< / جسم >
اس کوڈ میں:
- ' متن کا مرکز ٹیگز کے مواد کو اسکرین کے بیچ میں ایڈجسٹ کرتا ہے۔
- مقرر ' ' کا استعمال کرتے ہوئے سبز کو ٹیگ کریں ' متن-سبز-600 '، متن کا سائز ' کے ذریعے پانچ گنا پر سیٹ کیا گیا ہے متن-5×1 'اور فونٹ پر زور دیا گیا ہے' کا استعمال کرتے ہوئے فونٹ بولڈ '
- دو' ' عناصر بھی بنائے جاتے ہیں اور پہلے کے لیے جامد بائیں طرف کی پوزیشن سیٹ کرتے ہیں ' div ' کا استعمال کرتے ہوئے ' جامد متن - بائیں '
- کی کلاسیں تفویض کریں ' p-2 '،' m-2 '،' bg-green-200 '،' h-48 'دوسرے div کے لئے اور اس کی پوزیشن کو بھی استعمال کرتے ہوئے مطلق نیچے بائیں پر سیٹ کریں۔ رشتہ دار نیچے-0 بائیں-0 'کلاس.
آؤٹ پٹ
مندرجہ بالا کوڈ کو فائل میں محفوظ کریں اور اس کے ذریعے بنائے گئے ویب پیج کا جائزہ لیں جو اس طرح ظاہر ہوگا:
جامد پوزیشن والا عنصر صفحہ کے عام بہاؤ کے ساتھ حرکت کرتا ہے جبکہ دوسرا عنصر اپنی مطلق پوزیشن کو برقرار رکھتا ہے۔
نتیجہ
دستاویز کے عام بہاؤ کے ساتھ DOM میں کسی عنصر کو مستحکم رکھنے کے لیے، ' جامد 'ٹیل ونڈ کی کلاس' پوزیشن 'افادیت. اس بلاگ نے دکھایا ہے کہ کسی بھی عنصر کو کیسے پوزیشن میں رکھا جائے ' جامد طور پر ایک سادہ عملی مظاہرے کے ساتھ۔