ایچ ٹی ایم ایل میں چسپاں عنصر کیسے بنایا جائے۔

یہ بلاگ سی ایس ایس پوزیشن پراپرٹی اور ایچ ٹی ایم ایل میں ایک چپچپا عنصر بنانے کے طریقہ کار پر بات کرے گا۔

سی ایس ایس پوزیشن پراپرٹی کیا ہے؟

CSS پوزیشن کی خاصیت HTML عناصر کی پوزیشننگ کا طریقہ بتاتی ہے، جو ایک مطلق، چپچپا، شماریاتی، فکسڈ، وراثت، رشتہ دار، یا ابتدائی ہو سکتا ہے۔

نحو

اوپر دیا گیا نحو ظاہر کرتا ہے کہ پوزیشن پراپرٹی کی قدریں مختلف ہیں۔ اس کے مطابق انہیں تفویض کیا جاسکتا ہے۔

اب، آئیے ایچ ٹی ایم ایل میں چپچپا عناصر بنانے کے طریقہ کار کو دیکھیں۔

سی ایس ایس پوزیشن کیا ہے: چپچپا؟

HTML عنصر ' کے ساتھ چپچپا ' پوزیشن ایک رشتہ دار پوزیشن رکھتی ہے جب تک کہ یہ ایک نقطہ تک نہ پہنچ جائے اور پھر ایک چپچپا عنصر کی طرح کام کرے۔

آئیے سی ایس ایس سٹکی پوزیشن کے تصور کو سمجھنے کے لیے ایک سادہ سی مثال پر غور کریں۔

مثال: ایچ ٹی ایم ایل میں چسپاں عنصر کیسے بنایا جائے؟
ایچ ٹی ایم ایل فائل میں، سرخی کے لیے

، پیراگراف کے لیے

، اور

کلاس کا نام شامل کریں۔ چپچپا ' پھر، ایک

ٹیگ شامل کریں جس میں نیسٹڈ آرڈر شدہ فہرست

کی فہرست
1. کے ساتھ ہو۔

   نوٹ : ہم نے ایک لمبی فہرست لی ہے تاکہ ہمارے صفحہ کو سکرول کرنے پر، آپ چپچپا عنصر کے رویے کا مشاہدہ کر سکیں۔

   ایچ ٹی ایم ایل

   < h2 > چسپاں نوٹس: چسپاں عنصر کا اثر دیکھیں < / h2 >
   < ص > پوزیشن: چپچپا < / ص >
   < div کلاس = 'چپچپا' > یہ میری کرنے کی فہرست ہے! < / div >
   < ص >
   < ol >
   < کہ > مینیجر کو کال کریں۔ < / کہ >
   < کہ > ملازمین سے ملاقات < / کہ >
   < کہ > رپورٹ جمع کروائیں۔ < / کہ >
   < کہ > ڈاکٹر کے پاس جاو < / کہ >
   < کہ > فلائٹ بک کرو < / کہ >
   < کہ > سیر کے لیے جائیں۔ < / کہ >
   < کہ > گروسری کے لیے جاؤ۔ < / کہ >
   < کہ > ٹی وی دیکھو < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < کہ > کچھ متن۔ < / کہ >
   < / ol >
   < / ص >

   اگلا، ہم اسٹیکی نامی div کو اسٹائل فراہم کریں گے:

   • یہاں، ' چپچپا ” اس طبقے کی نمائندگی کرتا ہے جس میں طرز کی خصوصیات کو لاگو کرنے کی ضرورت ہے۔
   • گھوبگھرالی بریکٹ کے اندر، ہم تفویض کریں گے ' پوزیشن ' جائیداد کی قیمت بطور ' چپچپا '
   • ' سب سے اوپر 'کے طور پر مقرر کیا گیا ہے' 0 '
   • ' پس منظر کا رنگ 'ہے' #00154f '
   • کچھ دو' بھرتی ' div کو اس کی قدر کے طور پر مقرر کر کے ' 40px '
   • ' حرف کا سائز 'جیسے' 30px '
   • ' رنگ 'فونٹس کا' کے طور پر سیٹ کیا گیا ہے سفید '

   سی ایس ایس

   چپچپا {
   پوزیشن : چپچپا ;
   سب سے اوپر : 0 ;
   پس منظر کا رنگ : #00154f ;
   بھرتی : 40px ;
   حرف کا سائز : 30px ;
   رنگ : سفید ;
   }

   HTML فائل کو محفوظ کریں اور آؤٹ پٹ دیکھنے کے لیے اسے براؤزر میں کھولیں:

   

   بونس ٹپ

   کا استعمال کرتے ہوئے ' hsla() 'طریقہ، آپ مندرجہ ذیل طور پر شامل چپچپا عنصر کے لئے ایک شفاف پس منظر ترتیب دے سکتے ہیں:

   پس منظر - رنگ : hsla ( 0 ، 100 %، 90 %، 0.8 ) ;

   آؤٹ پٹ

   

   اس طرح سی ایس ایس ترتیب دے کر عنصر مخصوص پوزیشن پر قائم رہتا ہے۔ پوزیشن ' جائیداد کی قیمت بطور ' چپچپا '

   نتیجہ

   ' چپچپا CSS میں پوزیشن، عنصر کی پوزیشن کو رشتہ دار اور فکسڈ کے درمیان ٹوگل بناتی ہے۔ نتیجے کے طور پر، اضافی چپچپا عنصر اسکرول کے مقابلے میں اس وقت تک رکھا جاتا ہے جب تک کہ یہ کسی خاص مقام تک نہ پہنچ جائے جب یہ چپچپا کی طرح برتاؤ کرے۔ آپ hsla() طریقہ استعمال کر کے شامل کیے گئے چپچپا عنصر کی شفافیت کی سطح کو بھی ایڈجسٹ کر سکتے ہیں۔ اس بلاگ نے سادہ اور چپچپا شفاف عناصر بنانے کے بارے میں آپ کی رہنمائی کی۔