আমরা CSS-এ একটি উপাদানের অবস্থানকে স্ট্যাটিক হিসাবে সংজ্ঞায়িত করতে পারি যা উপাদানটিকে কোনো বিশেষ উপায়ে রেন্ডার করে না, তবে একটি সাধারণ উপায়ে। স্ট্যাটিক হিসাবে অবস্থান সহ উপাদানগুলি CSS পজিশনিং বৈশিষ্ট্যগুলির (বাম, ডান, উপরে এবং নীচে) দ্বারা প্রভাবিত হয় না।
উদাহরণ
আসুন CSS স্ট্যাটিক পজিশনিং পদ্ধতি -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: static;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</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">This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> আউটপুট
উপরের কোডের আউটপুট −
নিচে দেওয়া হল
