CSS-এ এলিমেন্টের পরম অবস্থান

এই পাঠে আমরা এলিমেন্টের পরম অবস্থান নিয়ে আলোচনা করব। এটি পৃষ্ঠার নির্দিষ্ট স্থানাঙ্ক অনুযায়ী এলিমেন্ট স্থাপন করতে দেয়। উদাহরণস্বরূপ, একটি এলিমেন্টকে পৃষ্ঠার শীর্ষ থেকে 100px এবং বাম থেকে 200px অবস্থানে স্থাপন করা যেতে পারে। এলিমেন্টটি সেখানে চলে যাবে, সেখানে অন্যান্য এলিমেন্ট থাকলে সেটি বিবেচনা না করেই এবং সরাসরি তাদের উপরে অবস্থান নেবে। বলা হয় যে এই ক্ষেত্রে এলিমেন্টটি নরমাল ফ্লো থেকে বেরিয়ে যায়:所有 অন্যান্য এলিমেন্ট এমনভাবে আচরণ করবে যেন আমাদের এলিমেন্টটি নেই।

একটি এলিমেন্টকে পরমভাবে স্থাপন করতে, এলিমেন্টটিকে position প্রপার্টি absolute মান দিতে হবে। এই প্রপার্টি ছাড়াও, আরও দুটি প্রয়োজন: একটি উল্লম্ব স্থানাঙ্ক নির্ধারণ করবে, এবং দ্বিতীয়টি - অনুভূমিক স্থানাঙ্ক।

উল্লম্বের জন্য উপরে থেকে বা নীচে থেকে দূরত্ব নির্ধারণ করতে হবে। উপরে থেকে দূরত্ব নির্ধারণ করে top প্রপার্টি, এবং নীচে থেকে দূরত্ব - bottom প্রপার্টি। অনুভূমিকের জন্য বাম থেকে বা ডান থেকে দূরত্ব নির্ধারণ করতে হবে। বাম থেকে দূরত্ব নির্ধারণ করে left প্রপার্টি, এবং ডান থেকে দূরত্ব - right প্রপার্টি।

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

উদাহরণ

প্রথমে আসুন শুধু দুটি ব্লক তৈরি করি কোনো অবস্থান ছাড়াই (খেয়াল করুন যে এলিমেন্টগুলি উইন্ডোর প্রান্তে লাগানো নেই, কারণ body-এর ডিফল্টভাবে margin আছে):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

উদাহরণ

এখন সবুজ ব্লকটিকে পরম অবস্থান দিয়ে, এটিকে শীর্ষ থেকে 150px এবং বাম থেকে 100px অবস্থানে স্থাপন করি:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

উদাহরণ

এখন সবুজ ব্লকটিকে শীর্ষ থেকে 0px এবং বাম থেকে 0px অবস্থানে স্থাপন করি:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

উদাহরণ

এখন সবুজ ব্লকটিকে শীর্ষ থেকে 0px এবং ডান থেকে 0px অবস্থানে স্থাপন করি:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

উদাহরণ

এখন সবুজ ব্লকটিকে নীচ থেকে 0px এবং ডান থেকে 0px অবস্থানে স্থাপন করি:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

উদাহরণ

এখন সবুজ ব্লকটিকে নীচ থেকে 0px এবং বাম থেকে 0px অবস্থানে স্থাপন করি:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ব্যবহারিক সমস্যা

পরম অবস্থান ব্যবহার করে ব্লকগুলি নিম্নরূপভাবে স্থাপন করুন: