CSS-তে স্থানাঙ্ক ছাড়াই পরম অবস্থান

আসলে, পরম অবস্থান নির্দেশ করার সময় স্থানাঙ্ক নির্দিষ্ট করা বাধ্যতামূলক নয়। যদি একটি উপাদানকে শুধুমাত্র position মান absolute-এ লেখা হয়, তবে এটি একদম অবস্থান করা হবে, কিন্তু এটি যেখানে ছিল সেখানেই থাকবে। একই সময়ে, অন্যান্য সমস্ত উপাদান এমন আচরণ করবে যেন আমাদের উপাদানটি নেই এবং এটি এর উপর চাপিয়ে দিতে পারে।

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

উদাহরণ

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

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

উদাহরণ

এবং এখন সবুজ ব্লকটিকে absolute যোগ করি। ফলস্বরূপ, এই ব্লকটি তার জায়গায় থাকবে, এবং নীচের সমস্ত উপাদান এমন আচরণ করবে, যেন আমাদের উপাদানটি নেই এবং এটি এর উপর চাপিয়ে দেবে:

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

উদাহরণ

এবং এখন আসুন left বৈশিষ্ট্য যোগ করি, উল্লম্ব অবস্থান না দিয়ে। ফলস্বরূপ অনুভূমিকভাবে আমাদের ব্লকটি নির্দিষ্ট করা হবে মান, এবং উল্লম্বভাবে - এটি যেখানে ছিল সেখানেই থাকবে দাঁড়িয়ে:

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* অনুভূমিক অবস্থান যোগ করা হচ্ছে */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

উদাহরণ

এখন, বিপরীতভাবে, আসুন বৈশিষ্ট্য যোগ করি top, অনুভূমিক অবস্থান না দিয়ে। ফলস্বরূপ উল্লম্বভাবে আমাদের ব্লক হয়ে যাবে নির্দিষ্ট মান, এবং অনুভূমিকভাবে - যেখানে ছিল সেখানেই দাঁড়িয়ে থাকবে:

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* উল্লম্ব অবস্থান যোগ করা হচ্ছে */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}