CSS-এ প্যারেন্টের সাপেক্ষে পজিশনিং

যদি একটি এলিমেন্টকে relative দেওয়া হয়, এবং এর চাইল্ড এলিমেন্টকে absolute দেওয়া হয়, তাহলে এই চাইল্ড এলিমেন্টটি ব্রাউজার উইন্ডোর সাপেক্ষে নয়, বরং তার প্যারেন্টের সাপেক্ষে পজিশন হবে।

সাধারণত, এই ক্ষেত্রে প্যারেন্টকে কোনো অফসেট ছাড়াই relative দেওয়া হয়। এই ক্ষেত্রে এই প্যারেন্টের সাথে কিছুই ঘটে না, কিন্তু এর সমস্ত চাইল্ড এখন এর সাপেক্ষে পজিশন হবে।

আসুন উদাহরণ দিয়ে দেখি।

উদাহরণ

প্রথমে আসুন শুধু একটি প্যারেন্ট ব্লক এবং একটি চাইল্ড ব্লক তৈরি করি কোনো পজিশনিং ছাড়াই:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

উদাহরণ

এখন আসুন সবুজ ব্লকটিকে পরমভাবে পজিশন করি। যেহেতু প্যারেন্টকে relative দেওয়া হয়নি, চাইল্ডটি ব্রাউজার উইন্ডোর সাপেক্ষে পজিশন হবে:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

উদাহরণ

এখন প্যারেন্টকে relative নির্দিষ্ট করি। এই ক্ষেত্রে চাইল্ডটি তার প্যারেন্টের সাপেক্ষে পজিশন হবে:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

ব্যবহারিক কাজ

নিম্নলিখিত কাজগুলিতে, মূল ব্লকটি margin ব্যবহার করে auto মান দিয়ে কেন্দ্রে অবস্থান করছে, এবং বাকিগুলি position বৈশিষ্ট্য ব্যবহার করে এর সাপেক্ষে পজিশন করা হচ্ছে।