مکمل بمقابلہ رشتہ دار - سی ایس ایس پوزیشننگ کی وضاحت

سی ایس ایس پوزیشننگ صرف X، Y Coordinates سے زیادہ ہے

سی ایس ایس پوزیشننگ طویل عرصہ سے ویب سائٹ کی ترتیب بنانے کا ایک اہم حصہ رہا ہے. یہاں تک کہ Flexbox اور CSS Grid کی طرح جدید CSS سی ایس ایس کی ترتیب کے تراکیب کے اضافے کے ساتھ، پوزیشننگ اب بھی چالوں کے کسی بھی ویب ڈیزائنر بیگ میں ایک اہم جگہ ہے.

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

جبکہ مطلق اور رشتہ دار دو سی ایس ایس کی پوزیشن کی خصوصیات ہیں جو اکثر ویب ڈیزائن میں استعمال ہوتے ہیں، اصل میں چار ریاستوں کی حیثیت کی جائیداد میں موجود ہیں:

• جامد
• مطلق
• رشتہ دار
• مقررہ

جامد ویب صفحہ پر کسی بھی عنصر کے لئے ڈیفالٹ پوزیشن ہے. اگر آپ کسی عنصر کی حیثیت کی وضاحت نہیں کرتے تو یہ جامد ہو جائے گا. اس کا مطلب یہ ہے کہ یہ اس پر مبنی سکرین پر دکھایا جائے گا کہ یہ ایچ ٹی ایم ایل دستاویز میں ہے اور یہ اس دستاویز کے عام بہاؤ کے اندر کیسے ظاہر کرے گا.

اگر آپ پوزیشننگ کے اصولوں کو اوپر یا بائیں جیسے ایک عنصر پر ایک عنصر پر لاگو کرتے ہیں تو، وہ قوانین کو نظر انداز کر دیا جائے گا اور عنصر باقی رہیں گے جہاں عام دستاویز کے بہاؤ میں موجود ہوتا ہے. سچ میں، آپ کو شاید ہی کبھی کبھی، اگر کبھی بھی، سی ایس ایس میں ایک مستحکم پوزیشن پر ایک عنصر مقرر کرنے کی ضرورت ہے کے بعد سے یہ پہلے سے طے شدہ قیمت ہے.

مطلق سی ایس ایس پوزیشننگ

مطلق پوزیشننگ شاید سمجھنے کے لئے سب سے آسان سی ایس ایس کی پوزیشن ہے. آپ اس سی ایس ایس کی پوزیشن پراپرٹی کے ساتھ شروع کرتے ہیں:

پوزیشن: مطلق؛

اس قدر براؤزر کو بتاتا ہے کہ جو کچھ پوزیشن پر جا رہا ہے وہ دستاویز کے عام بہاؤ سے ہٹا دیا جاسکتا ہے اور اس کے بجائے اس صفحے پر ایک صحیح مقام میں رکھا جاتا ہے. اس کا شمار اس عنصر کے قریب ترین غیر مستحکم پوزیشن پر مبنی ہے.

کیونکہ ایک بالکل پوزیشن عنصر دستاویز کے عام بہاؤ سے نکال دیا جاتا ہے، اس سے یہ اثر انداز نہیں ہوگا کہ HTML میں اس سے پہلے یا اس کے بعد عناصر ویب صفحہ پر پوزیشن میں ہیں.

مثال کے طور پر - اگر آپ کو ایک ڈویژن تھا جس سے نسبتا قیمت کا استعمال کرتے ہوئے تعین کیا گیا تھا (ہم اس قیمت کو جلد ہی دیکھیں گے)، اور اس ڈویژن کے اندر آپ کو ایک پیراگراف تھا جس میں آپ ڈویژن کے سب سے اوپر سے 50 پکسلز چاہتے ہیں، آپ اس پیراگراف میں "سب سے اوپر" جائیداد پر 50px کی آفسیٹ قیمت کے ساتھ ساتھ "مطلق" کی پوزیشن کی قدر شامل ہوگی.

پوزیشن: مطلق؛ اوپر: 50px؛

یہ بالکل پوزیشن عنصر پھر اس نسبتا پوزیشن والے ڈویژن کے سب سے اوپر سے 50 پکسلز کو ظاہر کرے گا - کوئی بھی بات نہیں کہ عام بہاؤ میں اور کیا دکھاتا ہے. آپ کے "بالکل" پوزیشن میں عنصر اس کے سیاق و نسب کے طور پر نسبتا پوزیشن میں ایک کا استعمال کرتا ہے اور آپ کا استعمال کرنے والا مثبت قدر یہ ہے کہ یہ.

آپ کو استعمال کرنے کے لئے دستیاب چار پوزیشننگ خصوصیات ہیں:

• اوپر
• دائیں
• نیچے
• بائیں

آپ یا تو اوپر یا نیچے استعمال کر سکتے ہیں (چونکہ عنصر ان اقدار کے مطابق پوزیشن نہیں کی جاسکتی ہے) اور پھر دائیں یا بائیں.

اگر عنصر مطلق کی حیثیت پر مقرر ہوتا ہے، لیکن اس کے پاس کوئی غیر مستحکم پوزیشن نہیں ہے، پھر جسم کے عنصر سے تعلق رکھتا ہے، جو اس صفحے کا اعلی ترین عنصر ہے.

رشتہ دار پوزیشننگ

ہم پہلے سے ہی رشتہ دار پوزیشننگ کا ذکر کرتے ہیں، لہذا اب ہم اس کی جائیداد کو دیکھتے ہیں.

رشتہ دار پوزیشننگ اسی چار پوزیشننگ کی خصوصیات کو مطلق پوزیشننگ کے طور پر استعمال کرتا ہے، لیکن اس کے قریب عنصر کے قریب غیر غیر مستحکم پائیدار آبجیکٹ پر اس کی حیثیت کو قائم کرنے کی بجائے، یہ عنصر ہو گا کہ اگر عنصر ہو تو یہ عام بہاؤ میں موجود تھا.

مثال کے طور پر، اگر آپ کے ویب صفحے پر تین پیراگراف ہوتے ہیں، اور تیسرے میں اس پر رکھی گئی "پوزیشن: رشتہ دار" سٹائل ہے، تو اس کی حیثیت اس کے موجودہ مقام پر مبنی ہوگی.

پیراگراف 1.

پیراگراف 2.

پیراگراف 3.

مندرجہ بالا مثال کے طور پر، تیسرا پیراگراف کنٹینر عنصر کے بائیں طرف سے 2em پوزیشن میں رکھا جائے گا، لیکن اب بھی پہلے دو پیراگراف کے نیچے ہو جائے گا. یہ دستاویز کے عام بہاؤ میں رہیں گے، اور صرف تھوڑا سا آفسیٹ ہو جائے گا. اگر آپ اسے پوزیشن میں تبدیل کر لیتے ہیں تو: مطلق؛ اس کے بعد کچھ بھی اس کے اوپر ظاہر ہوتا ہے، کیونکہ یہ اب دستاویز کے عام بہاؤ میں نہیں ہوگا.

ایک ویب صفحے پر عناصر اکثر پوزیشن کی قیمت مقرر کرنے کے لئے استعمال ہوتے ہیں: کوئی آفسیٹ قیمت قائم نہیں کی جاتی ہے، جس کا مطلب یہ ہے کہ اس عنصر میں یہ ہے کہ یہ عام بہاؤ میں واقع ہوگا. یہ مکمل طور پر اس عنصر کو ایک سیاق و سباق کے طور پر قائم کرنے کے لئے کیا جاتا ہے جس کے خلاف دوسرے عناصر بالکل پوزیشن میں جا سکتے ہیں. مثال کے طور پر، اگر آپ کو "مکمل کنٹینر" کے طبقے کی قیمت کے ساتھ اپنی پوری ویب سائٹ کے ارد گرد تقسیم کرنا ہے تو (یہ ویب ڈیزائن میں ایک عام منظر ہے)، یہ تقسیم نسبتا کی حیثیت پر مقرر کیا جاسکتا ہے تاکہ اس کے اندر کسی بھی چیز کا استعمال کرسکتا ہے. یہ ایک پوزیشننگ سیاق و سباق کے طور پر.

فکسڈ پوزیشننگ کے بارے میں کیا؟

فکسڈ پوزیشننگ مطلق پوزیشننگ کی طرح بہت کچھ ہے. عنصر کی حیثیت اسی طرح سے مطلق ماڈل کے طور پر شمار ہوتی ہے، لیکن اس کے بعد فکسڈ عناصر اس مقام میں طے کی جاتی ہیں- تقریبا تقریبا واٹر مارک کی طرح. اس صفحے پر سب کچھ اس عنصر سے پہلے طومار کرے گا.

اس پراپرٹی کی قیمت کا استعمال کرنے کے لئے، آپ قائم کریں گے:

پوزیشن: مقررہ؛

ذہن میں رکھیں، جب آپ اپنی سائٹ پر کسی عنصر کو درست کریں تو، اس ویب سائٹ پر پرنٹ کریں گے جب آپ کے ویب صفحے کو چھپی ہوئی ہے. مثال کے طور پر، اگر آپ کے عنصر اپنے صفحے کے سب سے اوپر مقرر ہوجائے تو، یہ ہر چھپی ہوئی صفحہ کے سب سے اوپر دکھائے جائیں گے - کیونکہ یہ صفحہ کے سب سے اوپر مقرر کیا گیا ہے. آپ ذرائع ابلاغ کی اقسام کو تبدیل کرنے کیلئے پرنٹ شدہ صفحات کو مقرر عناصر کو کیسے تبدیل کرنے کے لۓ استعمال کرسکتے ہیں:

media اسکرین {h1 # پہلے {پوزیشن: مقررہ؛ }}media پرنٹ {h1 # پہلے {پوزیشن: جامد؛ }}

جینیفر کریین کی طرف سے اصل مضمون. 1/7/16 پر جیریمی Girard کی طرف سے ترمیم.