সিএসএস: অবস্থানের বৈশিষ্ট্যের মধ্যে পার্থক্য

আমার আগের পোস্টে, আমি ডিসপ্লেটির অবস্থা এবং এটি কীভাবে আপনাকে CSS ব্যবহার করে আপনার পৃষ্ঠায় আইটেম স্থাপন করতে সহায়তা করতে পারে সে সম্পর্কে লিখেছিলাম। আপনার আইটেমটি পৃষ্ঠায় কোথায় রয়েছে তা নিয়ন্ত্রণ করতে আপনি আর একটি নামধারী সিএসএস সম্পত্তি ব্যবহার করতে পারেন। এটি প্রদর্শন বৈশিষ্ট্যটির পাশাপাশি আপনাকে আপনার আইটেমের অবস্থান সম্পর্কে আরও বিশদ দেবে।

অবস্থানের বৈশিষ্ট্যটি প্রদর্শন বৈশিষ্ট্যের চেয়ে কিছুটা বিভ্রান্তিকর। চিন্তা করবেন না, আপনি একমাত্র নন যিনি জানেন না যে প্রতিটি অবস্থান আপনার আইটেমটির জন্য কী করবে। আমি আশা করি এই পোস্টটি এই অস্পষ্ট অঞ্চলগুলি পরিষ্কার করতে সহায়তা করে।

আইটেমগুলি সাধারণত পৃষ্ঠায় স্থাপন করা যেতে পারে, কখনও কখনও পৃষ্ঠার উপরে, নীচে, বাম এবং ডান মানগুলির সাথে। তবে অবস্থানের বৈশিষ্ট্যটি নির্ধারণ করে যে তারা পৃষ্ঠায় কোথায় রয়েছে। বেশ কয়েকটি পজিশনিং বৈশিষ্ট্য রয়েছে:

  • স্থিতিশীল: প্রতিটি আইটেমের জন্য ডিফল্ট রাষ্ট্র। কোনও মনোনীত অবস্থান নেই এবং আইটেমটি সাধারণত পৃষ্ঠায় ভাসতে থাকবে। আপনি যদি পূর্ব নির্ধারিত অবস্থানটি বাতিল করতে চান তবে আপনাকে এই অবস্থানের মান নির্দিষ্ট করার দরকার নেই। উদাহরণস্বরূপ, যদি আপনার ওয়েবসাইটে ডিফল্ট অবস্থান থাকে।
  • আপেক্ষিক: তুলনামূলকভাবে স্থাপন করা আইটেমগুলির অবস্থান থাকতে পারে যখন অতিরিক্ত বৈশিষ্ট্য উপলব্ধ থাকে: উপরে, নীচে, বাম এবং ডান। একটি অতিরিক্ত বৈশিষ্ট্য আইটেমটিকে স্বাভাবিক থেকে সরিয়ে দেবে। এই অবস্থানটি ব্যবহার করার সময় কোনও স্থান তৈরি করা হয় না। এই অবস্থানে, আপনি জেড-ইনডেক্স বৈশিষ্ট্যটিও ব্যবহার করতে পারেন। ডিফল্টরূপে (মান: স্বয়ংক্রিয়), আইটেমটি অন্য কোনও স্থিতিশীল উপাদানের উপরে উপস্থিত হয়।

* দ্রষ্টব্য: আপনি কেবল এম্বেড থাকা উপাদানগুলিতে জেড-সূচক সম্পত্তি ব্যবহার করতে পারেন। এই বৈশিষ্ট্যটি স্থিরভাবে রাখা আইটেমগুলির সাথে কাজ করে না। জেড-ইনডেক্স আপনার আইটেমগুলির ক্রম নিয়ন্ত্রণ করে। আইটেম সেটের উপস্থিতি নিয়ন্ত্রণ করতে আপনি জেড-ইনডেক্স মানটি পরিবর্তন করতে পারেন। শীর্ষস্থানীয় জেড-সূচক আইটেমটি নীচের স্তরটির ক্রম এবং তদ্বিপরীতভাবে স্থাপন করে।

  • স্থির: একেবারে অবস্থানযুক্ত আইটেমটি ভিউপোর্ট / ব্রাউজার উইন্ডোর সাথে সম্পর্কিত এবং স্ক্রল করার সময়ও একই থাকে। আপনি যদি এই অবস্থানটি ব্যবহার করেন এবং আপনার প্রদর্শনের মতো নমনীয় হন তবে নিখুঁত অবস্থান নমনীয় ধারকগুলিতে কাজ করে। যাইহোক, নিখুঁত অবস্থানের স্থিতিস্থাপক শিশুদের সাথে দ্বন্দ্ব সৃষ্টি করে (ডিশ বাঁকানো)।
  • পরম: নিখুঁত উপাদান নিকটতম পূর্বপুরুষ (পিতামাতা / ধারক উপাদান) এর সাথে সম্পর্কিত। পূর্বপুরুষ যদি কোনও উপাদান না হন তবে উপাদানটি নথির বডির বিরুদ্ধে অবস্থান করে। পরম এবং স্থির অবস্থানের বিপরীতে, আইটেমটি আপনি ঘোরানোর সাথে সাথে পৃষ্ঠাতে সরানো হয়। পরম অবস্থান নির্ধারণ করে, উপাদানটি নথির অন্যান্য উপাদানগুলির প্রবাহ থেকে বাদ দেওয়া হয়। এই পুরোপুরি এম্বেড থাকা আইটেমটি আপনার পৃষ্ঠার অন্যান্য উপাদানগুলিকে প্রভাবিত করে না এবং বিপরীতে।
  • ভাসা: ফটোগুলির চারপাশে পাঠ্য মোড়ানো করতে এবং পৃষ্ঠার বাম বা ডানদিকে আরও রাখার জন্য ব্যবহৃত হয়।
  • হুবহু: ভাসমান উপাদানগুলি বাম বা ডান বা উভয়ই সরিয়ে নিয়ে যায়, ভাসমান উপাদানগুলির পরে উপস্থিত সামগ্রী এবং সামগ্রীকে কম করতে। আপনি ভাসমান উপাদানটিকে ইনলাইন-শুরু বা ইনলাইন-এন্ডেও স্থানান্তর করতে পারেন।

চাক্ষুষভাবে ভিজ্যুয়াল লেআউট বৈশিষ্ট্যগুলির মধ্যে পার্থক্যগুলির জন্য পরীক্ষা করুন এবং এটি সিএসএসের আরও বিস্তৃত অবস্থানের নথি document