HTML عناصر کی پوزیشن ویب صفحہ کے اجزاء کو منظم کرنے میں اہم کردار ادا کرتی ہے۔ مزید خاص طور پر، سی ایس ایس کا استعمال کرکے عناصر کی پوزیشن کو ایڈجسٹ کیا جا سکتا ہے۔ پوزیشن ' جائیداد. یہ خاصیت آفسیٹ خصوصیات کے ساتھ منسلک ہو سکتی ہے، جیسے اوپر، بائیں، دائیں، اور نیچے کی خصوصیات، صفحہ پر عنصر کو ایڈجسٹ کرنے کے لیے مخصوص اقدار فراہم کرتی ہیں۔ تاہم، ' مطلق پوزیشن والے عناصر کو قریب ترین پوزیشن والے عنصر کے نسبت ایڈجسٹ کیا جا سکتا ہے۔
یہ پوسٹ سی ایس ایس کی مطلق پوزیشننگ کی وضاحت کرے گی۔
سی ایس ایس 'پوزیشن' پراپرٹی
' پوزیشن CSS میں پراپرٹی کو عنصر کی پوزیشن کو ایڈجسٹ کرنے کے لیے استعمال کیا جا سکتا ہے۔ پوزیشن پراپرٹی کی مختلف قدریں مقرر، مطلق، رشتہ دار، جامد، اور چپچپا ہیں۔ یہ قدریں عنصر کی پوزیشن کو ایڈجسٹ کرنے کے لیے آفسیٹ خصوصیات، جیسے اوپر، دائیں، بائیں اور نیچے کے ساتھ سیٹ کی گئی ہیں۔
سی ایس ایس مطلق پوزیشننگ کا اطلاق کیسے کریں؟
عنصر کی مطلق پوزیشننگ CSS کا استعمال کرتے ہوئے لاگو کی جا سکتی ہے ' پوزیشن 'قیمت کے ساتھ پراپرٹی' مطلق ' مطلق پوزیشن والے عنصر کو اس کے قریب ترین پوزیشن والے بنیادی عنصر کے مطابق ایڈجسٹ کیا جاتا ہے۔ لیکن اگر آباؤ اجداد کی جگہ نہیں ہے، تو یہ دستاویز کے باڈی سیکشن کے مطابق ایڈجسٹ ہو جائے گا۔
مثال
آئیے ایک عملی مثال سے تصور کو سمجھیں۔
مرحلہ 1: ایک HTML فائل بنائیں
HTML فائل میں، جسم کے عنصر کے اندر، کلاس کے نام کے ساتھ ایک div شامل کریں مرکزی ' پھر، تخلیق کردہ div کے اندر، درج ذیل صفات سے وابستہ ایک HTML ٹیگ شامل کریں:
-
- ' src ” تصویر کا لنک فراہم کرتا ہے۔
- ' کلاس 'سی ایس ایس میں عناصر کو اسٹائل کرنے کے لیے استعمال کیا جاتا ہے۔
- ' سب کچھ ” انتساب اس متن کی وضاحت کرتا ہے جو تصویر کی جگہ پر ظاہر ہوتا ہے اگر تصویر صفحہ پر لوڈ ہونے میں ناکام ہو جاتی ہے۔
- ' سب کچھ ” انتساب اس متن کی وضاحت کرتا ہے جو تصویر کی جگہ صفحہ پر ظاہر ہوتا ہے اگر تصویر صفحہ پر لوڈ ہونے میں ناکام ہو جاتی ہے۔
پھر، سرخی اور پیراگراف کے h1 اور p عناصر پر مشتمل ایک اور div شامل کریں:
< div کلاس = 'مرکزی' >< div کلاس = 'مواد' >
< img src = 'images/linuxlogo.png' کلاس = 'گھر' سب کچھ = 'لینکس لوگو' چوڑائی = '80px' >
< h1 > سی ایس ایس مطلق پوزیشننگ h1 >
< ص > ہیلو لینکس ہنٹ ٹیم ! ص >
div >
div >
سی ایس ایس میں، ایچ ٹی ایم ایل عناصر کو سجانے کے لیے اسٹائل کی متعدد خصوصیات کا استعمال کیا جاتا ہے۔
مرحلہ 2: 'تمام' عناصر کا انداز
* {فونٹ فیملی: وردانا، جنیوا، طاہوما، سانز سیرف؛
}
ایچ ٹی ایم ایل عناصر کو ' کا استعمال کرتے ہوئے اسٹائل کیا گیا ہے۔ فونٹ فیملی 'قیمت کے ساتھ پراپرٹی' وردانہ، جنیوا، تہوما، سانز سیرف ' اقدار کی یہ فہرست اس بات کو یقینی بناتی ہے کہ اگر براؤزر پہلی طرز کو سپورٹ نہیں کرتا ہے تو دوسرے کو لاگو کیا جائے گا۔
مرحلہ 3: اسٹائل 'ہوم' div
.گھر {پوزیشن: مطلق؛
اوپر: 50px؛
بائیں: 45px؛
}
ذیل میں لاگو خصوصیات ہیں ' گھر div:
-
- ' پوزیشن 'پراپرٹی عنصر کی پوزیشن کا تعین کرتی ہے۔ یہاں، شامل کیا گیا ' مطلق ” عنصر کو HTML کے باڈی سیکشن سے متعلق رکھے گا۔
- ' سب سے اوپر ” پراپرٹی کو عنصر کی عمودی ایڈجسٹمنٹ کے لیے استعمال کیا جاتا ہے۔
- ' بائیں ' پراپرٹی عنصر کی افقی ایڈجسٹمنٹ کے لیے استعمال ہوتی ہے۔
مرحلہ 4: سٹائل 'مواد' div
مواد {پس منظر کا رنگ: کیڈٹ بلیو؛
چوڑائی: 300px؛
اونچائی: 250px؛
پیڈنگ-بائیں: 40px؛
مارجن-بائیں: 80px؛
}
ذیل میں سی ایس ایس کی خصوصیات ہیں جو ' مواد div:
-
- ' پس منظر کا رنگ پراپرٹی عنصر کے پس منظر کا رنگ سیٹ کرتی ہے۔
- ' چوڑائی پراپرٹی عنصر کی چوڑائی کا تعین کرتی ہے۔
- ' اونچائی پراپرٹی عنصر کی اونچائی کا تعین کرتی ہے۔
- ' پیڈنگ-بائیں ' پراپرٹی کو عنصر کے مواد کے بائیں جانب جگہ شامل کرنے کے لیے سیٹ کیا گیا ہے۔
- ' مارجن-بائیں ' پراپرٹی عنصر کے بائیں جانب جگہ کی وضاحت کرتی ہے۔
اس وقت، ہمارا ویب صفحہ اس طرح نظر آئے گا:
مندرجہ بالا نتائج سے دیکھا جا سکتا ہے کہ div ہوم کی تصویر کو دستاویز کے باڈی کے بائیں طرف سے 50px اور اوپر سے 45px پر رکھا گیا ہے۔ مزید یہ کہ ہوم ڈیو کی پوزیشن ایچ ٹی ایم ایل کے باڈی سیکشن کے مقابلے میں سیٹ کی گئی ہے۔
عنصر 'رشتہ دار' کی پوزیشن کو پوزیشن شدہ پیرنٹ عنصر سے کیسے ایڈجسٹ کیا جائے؟
یہ سیکشن آپ کی رہنمائی کرے گا کہ آپ عنصر کی پوزیشن کو قریب ترین پوزیشن کے پیرنٹ عنصر کے نسبت ایڈجسٹ کریں۔
'مواد' ڈیو کی 'پوزیشن' پراپرٹی سیٹ کریں۔
پوزیشن: رشتہ دار
بنیادی عنصر کے نسبت عنصر کی پوزیشن کو ایڈجسٹ کرنے کے لیے، سیٹ کریں ' پوزیشن 'والدین عنصر کی خاصیت' رشتہ دار ' قدر.
'img' عنصر کی 'پوزیشن' پراپرٹی سیٹ کریں۔
.گھر {پوزیشن: مطلق؛
اوپر: 100px؛
بائیں: 220px؛
}
یہاں:
-
- ' پوزیشن 'جائیداد جس کی قدر مقرر کی گئی ہے' مطلق ” کو پیرنٹ عنصر کے حوالے سے پوزیشن میں رکھا جائے گا (یعنی، مواد div پوزیشن ویلیو رشتہ دار کے ساتھ سیٹ کی گئی ہے)۔
- ' سب سے اوپر ' پراپرٹی کو اوپر سے عنصر کی پوزیشن کو ترتیب دینے کے لیے استعمال کیا جاتا ہے۔
- ' بائیں ' پراپرٹی کا استعمال بائیں طرف سے عنصر کی پوزیشن کو ترتیب دینے کے لیے کیا جاتا ہے۔
آؤٹ پٹ
یہ نتیجہ سے دیکھا جا سکتا ہے کہ تصویر کو اس کے والدین کی تقسیم کے مقابلے میں رکھا گیا ہے، اور یہ مناسب لگ رہا ہے.
نتیجہ
سی ایس ایس ' پوزیشن HTML عناصر کی پوزیشن کو متعین کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔ اس پراپرٹی کی قدر مقررہ، رشتہ دار، مطلق، چپچپا، اور جامد کے طور پر کی جا سکتی ہے۔ ' مطلق ” قدر عنصر کو اس کے قریبی پوزیشن والے پیرنٹ عنصر کے مطابق رکھے گی۔ اس پوسٹ نے ایک عملی مثال کے ساتھ CSS مطلق پوزیشننگ کی وضاحت کی ہے۔