position বৈশিষ্ট্য

position বৈশিষ্ট্য এলিমেন্টগুলির অবস্থান নির্ধারণের পদ্ধতি নির্দিষ্ট করে। এই বৈশিষ্ট্যটি প্রায়শই top, right, bottom, left, এই বৈশিষ্ট্যগুলির সাথে একত্রে ব্যবহৃত হয়, যেগুলি যথাক্রমে উপরে, ডানে, নীচে, বামে প্রান্তিক ব্যবধান সেট করে।

সিনট্যাক্স

সিলেক্টর {
	position: absolute | relative | fixed | static | sticky;
}

position-এর মান

মান	বর্ণনা
`absolute`	সম্পূর্ণ অবস্থান। এলিমেন্টটি ডকুমেন্টের সাধারণ ফ্লো থেকে সরানো হয় এবং অবস্থান নির্ধারণ করা হয় নিকটতম অবস্থানযুক্ত পূর্বপুরুষের (যদি থাকে) সাপেক্ষে বা ব্রাউজার উইন্ডোর সাপেক্ষে।
`relative`	আপেক্ষিক অবস্থান। এলিমেন্টটি ডকুমেন্ট ফ্লোতে তার স্বাভাবিক অবস্থানের সাপেক্ষে স্থানান্তরিত হয়, কিন্তু এটি যে স্থান দখল করেছিল, সেটি সংরক্ষিত থাকে।
`fixed`	স্থির অবস্থান। এলিমেন্টটি ডকুমেন্টের সাধারণ ফ্লো থেকে সরানো হয় এবং অবস্থান নির্ধারণ করা হয় ব্রাউজার উইন্ডোর সাপেক্ষে। পৃষ্ঠা স্ক্রল করলেও তার জায়গায় থাকে।
`static`	স্থির অবস্থান। মানটির অর্থ হল কোন অবস্থান নির্ধারণ নেই এবং এলিমেন্টটি স্বাভাবিকের মতো আচরণ করে।
`sticky`	স্টিকি অবস্থান। এলিমেন্টটি `relative`-এর মতো আচরণ করে, যতক্ষণ না এটি স্ক্রল করার সময় নির্দিষ্ট অবস্থানে পৌঁছায়, তারপর এটি নির্দিষ্ট স্থানে আটকে যায় (`fixed`-এর মতো)।

ডিফল্ট মান: static।

উদাহরণ . সম্পূর্ণ অবস্থান

এলিমেন্টটিকে ছোট প্রান্তিক ব্যবধান সহ স্ক্রিনের উপরের বাম কোণে স্থাপন করা যাক:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

উদাহরণ . সম্পূর্ণ অবস্থান

এবং এখন এলিমেন্টটিকে ছোট প্রান্তিক ব্যবধান সহ স্ক্রিনের উপরের ডান কোণে স্থাপন করা যাক:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

উদাহরণ . স্থির অবস্থান

স্থির অবস্থানে এলিমেন্টটি স্ক্রল করার সময়ও তার জায়গায় থাকবে:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

উদাহরণ . আপেক্ষিক অবস্থান

আপেক্ষিক অবস্থানে এলিমেন্টটি স্থানান্তরিত হয় তার স্বাভাবিক অবস্থানের সাপেক্ষে, কিন্তু অন্যান্য এলিমেন্টগুলি এমনভাবে আচরণ করে, যেন এলিমেন্টটি স্থানান্তরিত হয়নি:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

উদাহরণ . নেস্টিং

যদি প্যারেন্টের position বৈশিষ্ট্যের মান relative হয়, তবে সম্পূর্ণ অবস্থানযুক্ত এলিমেন্টগুলি প্যারেন্টের সাপেক্ষে অবস্থান নির্ধারণ করবে:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

উদাহরণ . নেস্টিং

যদি প্যারেন্টের position বৈশিষ্ট্যের মান absolute হয়, তবে সম্পূর্ণ অবস্থানযুক্ত এলিমেন্টগুলি প্যারেন্টের সাপেক্ষে অবস্থান নির্ধারণ করবে:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

উদাহরণ . স্টিকি অবস্থান

যদি একটি এলিমেন্টের জন্য position বৈশিষ্ট্যের মান sticky হয়, তবে এলিমেন্টটি relative-এর মতো আচরণ করে, যতক্ষণ না এটি নির্দিষ্ট অবস্থানে স্ক্রল করার সময় পৌঁছায়, তারপর সেখানে আটকে যায়। আসুন একটি স্টিকি হেডার তৈরি করি:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

উদাহরণ . অবস্থান ছাড়া

যদি একটি এলিমেন্টকে অবস্থান উল্লেখ না করে সম্পূর্ণ অবস্থান নির্ধারণ করা হয়, তবে এলিমেন্টটি সেই স্থানেই থাকবে, যেখানে এটি অবস্থান ছাড়াই ছিল, কিন্তু অন্যান্য এলিমেন্টগুলি এটি দেখতে পাবে না:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

উদাহরণ . একটি অক্ষ

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

উদাহরণ . সব অবস্থান

সম্পূর্ণ অবস্থানে প্রস্থ এবং উচ্চতা না দিয়েই সব দিকে অবস্থান নির্ধারণ করা যেতে পারে। এই ক্ষেত্রে এলিমেন্টটি প্যারেন্ট ব্লকের কেন্দ্রে অবস্থান করবে:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

আরও দেখুন

z-index বৈশিষ্ট্য,
যা এলিমেন্টগুলির ওভারলেপ নির্ধারণ করে