আমরা সিএসএস-এ একটি উপাদানের অবস্থান নির্ধারণ করতে পারি যা ব্যবহারকারীর ভিউপোর্টের সাথে সম্পর্কিত উপাদানটিকে রেন্ডার করে। স্থির হিসাবে অবস্থান পদ্ধতি সহ উপাদানগুলি এমনকি স্ক্রোলেও সরে না এবং CSS পজিশনিং বৈশিষ্ট্য (বাম, ডান, উপরে এবং নীচে) দ্বারা অবস্থান করা হয়।
উদাহরণ
আসুন 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>What is ASP.NET?</div>
<p>ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites............</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">Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> আউটপুট
উপরের কোডের আউটপুট −
নিচে দেওয়া হল
