অবস্থান বৈশিষ্ট্য একটি উপাদান পজিশনিং ব্যবহার করা হয়. অর্থাৎ নিম্নোক্ত হল পজিশনিং এলিমেন্ট -
-
স্থির − পূর্ববর্তী উপাদান এবং পূর্ববর্তী নিম্নলিখিত উপাদানগুলিকে অনুসরণ করে স্বাভাবিক নথি প্রবাহের একটি অংশ হিসাবে উপাদান বাক্সটি স্থাপন করা হয়৷
-
আত্মীয় − উপাদানের বাক্সটি স্বাভাবিক প্রবাহের একটি অংশ হিসাবে রাখা হয় এবং তারপর কিছু দূরত্ব দ্বারা অফসেট করা হয়৷
-
পরম − উপাদানটির বাক্সটি তার থাকা ব্লকের সাথে সম্পর্কিত করে রাখা হয় এবং নথির স্বাভাবিক প্রবাহ থেকে সম্পূর্ণরূপে সরানো হয়৷
-
স্থির − উপাদানের বাক্সটি একেবারে অবস্থান করে, অবস্থানের জন্য বর্ণনা করা সমস্ত আচরণের সাথে:পরম৷
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> আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে
