আমরা সিএসএস-এ একটি উপাদানের অবস্থানকে আপেক্ষিক হিসাবে সংজ্ঞায়িত করতে পারি যা উপাদানটিকে সাধারণত রেন্ডার করে। আপেক্ষিক হিসাবে অবস্থান পদ্ধতি সহ উপাদানগুলি সিএসএস পজিশনিং বৈশিষ্ট্য (বাম, ডান, উপরে এবং নীচে) দ্বারা অবস্থান করা হয়।
উদাহরণ
আসুন CSS রিলেটিভ পজিশনিং মেথড -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: relative;
top:20px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development.................</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">PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়:−
