CSS এর সাথে পরম অবস্থান

CSS-এ, এইচটিএমএল উপাদানগুলিকে সাজাতে বেশ কিছু স্টাইলিং বৈশিষ্ট্য ব্যবহার করা হয়।

ধাপ 2: স্টাইল 'সমস্ত' উপাদান

এইচটিএমএল উপাদানগুলি ' ব্যবহার করে স্টাইল করা হয় ফন্ট-পরিবার 'মূল্য সহ সম্পত্তি' ভার্দানা, জেনেভা, তাহোমা, সান-সেরিফ ” মানগুলির এই তালিকাটি নিশ্চিত করে যে যদি ব্রাউজারটি প্রথম শৈলীটিকে সমর্থন না করে তবে অন্যটি প্রয়োগ করা হবে৷

ধাপ 3: স্টাইল 'হোম' ডিভ

নীচে প্রয়োগ করা বৈশিষ্ট্যগুলি ' বাড়ি ' div:

• • ' অবস্থান ' সম্পত্তি উপাদানের অবস্থান নির্ধারণ করে। এখানে, যোগ করা হয়েছে ' পরম ” HTML এর বডি সেকশনের সাপেক্ষে এলিমেন্ট রাখবে।
  • ' শীর্ষ উপাদানটির উল্লম্ব সমন্বয়ের জন্য সম্পত্তি ব্যবহার করা হয়।
  • ' বাম উপাদানটির অনুভূমিক সমন্বয়ের জন্য সম্পত্তি ব্যবহার করা হয়।

ধাপ 4: স্টাইল 'সামগ্রী' বিভাগ

নীচে সিএসএস বৈশিষ্ট্যগুলি রয়েছে যা প্রয়োগ করা হয় ' বিষয়বস্তু ' div:

• • ' পেছনের রঙ ' সম্পত্তি উপাদানটির পটভূমির রঙ সেট করে।
  • ' প্রস্থ ' সম্পত্তি উপাদানটির প্রস্থ নির্ধারণ করে।
  • ' উচ্চতা ' সম্পত্তি উপাদানের উচ্চতা সেট করে।
  • ' প্যাডিং-বাম উপাদানের বিষয়বস্তুর বাম দিকে স্থান যোগ করার জন্য সম্পত্তি সেট করা হয়েছে।
  • ' মার্জিন-বাম ” সম্পত্তি উপাদানটির বাম দিকে স্থান নির্দিষ্ট করে।

এই মুহুর্তে, আমাদের ওয়েব পৃষ্ঠাটি এরকম দেখাবে:

উপরের ফলাফল থেকে দেখা যায় যে ডিভ হোমের চিত্রটি ডকুমেন্টের বডির বাম দিক থেকে 50px এবং উপরে থেকে 45px এ স্থাপন করা হয়েছে। তাছাড়া, হোম ডিভের অবস্থান HTML এর বডি বিভাগের সাথে আপেক্ষিকভাবে সেট করা হয়।

পজিশনড প্যারেন্ট এলিমেন্টের সাথে 'আপেক্ষিক' উপাদানের অবস্থান কীভাবে সামঞ্জস্য করবেন?

এই বিভাগটি আপনাকে নিকটতম অবস্থানের অভিভাবক উপাদানের সাথে সম্পর্কিত উপাদানটির অবস্থান সামঞ্জস্য করার বিষয়ে গাইড করবে।

'বিষয়বস্তু' বিভাগের 'অবস্থান' বৈশিষ্ট্য সেট করুন

মূল উপাদানের সাথে সম্পর্কিত উপাদানটির অবস্থান সামঞ্জস্য করতে, ' সেট করুন অবস্থান 'মূল উপাদানের সম্পত্তি' থেকে আপেক্ষিক 'মান।

'img' উপাদানের 'অবস্থান' বৈশিষ্ট্য সেট করুন

এখানে:

• • ' অবস্থান ' মান সহ সম্পত্তি ' হিসাবে সেট করা পরম ” প্যারেন্ট এলিমেন্টের সাপেক্ষে অবস্থান করা হবে (অর্থাৎ, কন্টেন্ট ডিভ পজিশন মান আপেক্ষিক দিয়ে সেট করা হয়েছে)।
  • ' শীর্ষ ” সম্পত্তি উপরে থেকে উপাদান অবস্থান সেট করার জন্য ব্যবহার করা হয়.
  • ' বাম ” সম্পত্তি বাম থেকে উপাদান অবস্থান সেট করার জন্য ব্যবহার করা হয়.

আউটপুট

এটি ফলাফল থেকে দেখা যায় যে চিত্রটি তার মূল ডিভের সাথে সম্পর্কিত হয়েছে এবং এটি উপযুক্ত দেখাচ্ছে।

উপসংহার

সিএসএস ' অবস্থান HTML উপাদানগুলির অবস্থান নির্ধারণ করতে সম্পত্তি ব্যবহার করা হয়। এই সম্পত্তিকে স্থির, আপেক্ষিক, পরম, স্টিকি এবং স্ট্যাটিক হিসাবে মূল্যায়ন করা যেতে পারে। দ্য ' পরম ” মান উপাদানটিকে তার কাছাকাছি অবস্থান করা মূল উপাদানের সাথে সম্পর্কিত করবে৷ এই পোস্টটি একটি বাস্তব উদাহরণ সহ CSS পরম অবস্থান ব্যাখ্যা করেছে।