𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀
CSS position property یہ طے کرتی ہے کہ کوئی ایلیمنٹ آپ کے پیج پر کہاں واقع ہوگا۔ انہیں حرکت دینے کے لیے آپ top، right، bottom، اور left کا استعمال کرتے ہیں۔
پوزیشننگ کی پانچ اہم اقسام ہیں۔
Static یہ ڈیفالٹ سیٹنگ ہے۔ ایلیمنٹس پیج کی عام ترتیب کی پیروی کرتے ہیں۔ یہاں top یا left پراپرٹیز کا استعمال کرنے سے کوئی فرق نہیں پڑتا۔
Relative یہ ایلیمنٹ کو اس کی اصل جگہ کے لحاظ سے حرکت دیتا ہے۔ اگر آپ top میں 20px کا اضافہ کرتے ہیں، تو ایلیمنٹ نیچے کی طرف منتقل ہو جاتا ہے۔ دیگر ایلیمنٹس اپنی اصل جگہوں پر ہی رہتے ہیں اور اس خالی جگہ کو نہیں بھرتے۔
Absolute یہ ایلیمنٹ کو پیج کے عام بہاؤ (flow) سے الگ کر دیتا ہے۔ یہ اپنے قریب ترین پوزیشن شدہ آسنسیٹر (positioned ancestor) کی بنیاد پر اپنی جگہ طے کرتا ہے۔
دیگر اقسام میں Fixed اور Sticky شامل ہیں۔ Fixed ایلیمنٹس اسکرول کرنے کے باوجود ایک ہی جگہ پر رہتے ہیں۔ Sticky ایلیمنٹس relative ایلیمنٹس کی طرح کام کرتے ہیں جب تک کہ وہ کسی مخصوص مقام تک نہ پہنچ جائیں، اس کے بعد وہ fixed ہو جاتے ہیں۔
ان پراپرٹیز کے بارے میں مزید یہاں سیکھیں۔
ماخذ: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8