CSS-এ সম্পূর্ণ অভিভাবকের সাপেক্ষে অবস্থান

পূর্ববর্তী পাঠে আমরা বুঝেছিলাম যে, যদি অভিভাবককে relative দেওয়া হয়, তবে তার সন্তানরা সম্পূর্ণরূপে অবস্থান করবে তার সাপেক্ষে। এটি প্রায়শই করা হয় যখন তারা চায় না যে অভিভাবক উপাদান সাধারণ প্রবাহ থেকে বেরিয়ে আসুক।

এটাও হতে পারে যে অভিভাবককে দেওয়া হয়েছে absolute। এই ক্ষেত্রে, absolute সহ সন্তানরাও অবস্থান করবে এই ধরনের অভিভাবকের সাপেক্ষে, এবং না ব্রাউজার উইন্ডোর সাপেক্ষে:

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

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

400px আকারের সম্পূর্ণ অবস্থান সহ একটি বর্গাকার ব্লক তৈরি করুন। এর ভিতরে 50px আকারের আরও দুটি ব্লক তৈরি করুন। প্রথম ব্লকটি রাখুন অভিভাবকের উপরের ডান দিকে কোণে, এবং দ্বিতীয় ব্লকটি - নীচের বাম কোণে।