position প্রপার্টি একটি এলিমেন্টকে পজিশন করতে ব্যবহৃত হয়। অর্থাৎ নিচের পজিশনিং এলিমেন্টগুলো:
- static - এলিমেন্ট বক্স স্বাভাবিক ডকুমেন্ট ফ্লোর অংশ হিসেবে বिछায়, পূর্ববর্তী এলিমেন্টের 뒤를 অনుసরণ করে এবং পরবর্তী এলিমেন্টের আগে থাকে।
- relative - এলিমেন্টের বক্স স্বাভাবিক ফ্লোর অংশ হিসেবে বिछায়, এবং তারপর কিছু দূরত্ব দ্বারা অফসেট করা হয়।
- absolute - এলিমেন্টের বক্স এর কন্টেইনিং ব্লকের সাথে সম্পর্কে বिछায়, এবং ডকুমেন্টের স্বাভাবিক ফ্লো থেকে সম্পূর্ণ সরানো হয়।
- fixed - এলিমেন্টের বক্স অ্যাবসোলিউটলি পজিশন করা হয়, position: absolute-এর জন্য বর্ণিত সকল ব্যবহারিকতা সহ।
উদাহরণ
নিচের কোডটি CSS ব্যবহার করে এলিমেন্ট পজিশনিং দেখায়:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>
আউটপুট
উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:
