আমরা সিএসএস-এ একটি উপাদানের অবস্থানকে পরম হিসাবে সংজ্ঞায়িত করতে পারি যা উপাদানটিকে প্রথম অবস্থানে (স্থির ছাড়া) প্যারেন্টের সাথে সম্পর্কিত করে। পরম হিসাবে পজিশনিং পদ্ধতি সহ উপাদানগুলি সিএসএস পজিশনিং বৈশিষ্ট্য (বাম, ডান, উপরে এবং নীচে) দ্বারা অবস্থান করা হয়।
উদাহরণ
আসুন CSS অ্যাবসোলিউট পজিশনিং মেথড -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div:first-child {
background-color: orange;
text-align: center;
}
div:last-child {
width: 250px;
height: 100px;
margin: auto;
background-color: turquoise;
position: absolute;
z-index: -1;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</p>
<div>
</div>
</body>
</html> আউটপুট
উপরের কোডের আউটপুট −
নিচে দেওয়া হল
উদাহরণ
পজিশনিং পদ্ধতির জন্য আরেকটি উদাহরণ দেখা যাক -
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">MySQL is the most popular Open Source Relational SQL Database Management System.
MySQL is one of the best RDBMS being used for developing various web-based software applications. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> আউটপুট
উপরের কোডের আউটপুট −
নিচে দেওয়া হল
