position کنٹرول کرتا ہے کہ ایک عنصر کیسے رکھا جاتا ہے اور آیا offset خصوصیات (top/right/bottom/left) لاگو ہوتی ہیں۔
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute ایک عنصر کو اس کے قریب ترین ancestor کے نسبت رکھتا ہے جو positioned ہو (static کے علاوہ کچھ بھی)۔ لہذا آپ ایک parent پر position: relative سیٹ کرتے ہیں تاکہ یہ reference point بن جائے:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
یہ relative-parent / absolute-child pattern ہر جگہ ہے: badges، dropdowns، tooltips، close buttons۔
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) تک نہ پہنچے، پھر وہاں رہتا ہے جبکہ اس کا container نظر میں ہے — section headers کے لیے بہترین۔absolute/fixed عناصر عام flow سے نکال دیے جاتے ہیں، اس لیے وہ جگہ محفوظ نہیں رکھتے — siblings ایسے کام کرتے ہیں گویا وہ وہاں نہیں ہیں، جو overlap کا سبب بن سکتا ہے۔ اس کے لیے منصوبہ بندی کریں (مثال کے طور پر fixed navbar کی تلافی کے لیے padding شامل کریں)۔
position overlays، sticky headers، modals، dropdowns، اور badges کے لیے ضروری ہے۔
relative-parent/absolute-child relationship اور fixed-vs-sticky میں فرق عملی طریقے سے بنیادی ہیں جو آپ ہمیشہ استعمال کرتے ہیں۔