সিএসএস position প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| position | ১.০ | ৭.০ | ১.০ | ১.০ | ৪.০ |
সংজ্ঞা ও ব্যবহার
position প্রোপার্টি একটি এলিমেন্টের অবস্থান নির্ধারন করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| static | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
position: static/absolute/fixed/relative/initial/inherit;
একটি <h2> এলিমেন্টের অবস্থান নির্ধারণ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h2>absolute পজিশন দেওয়া একটি হেডিং</h2>
<p>absolute পজিশন দিয়ে একটি এলিমেন্টকে পেজের যেকোন জায়গায় রাখা যায়।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.position="absolute"উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
#myDIV {
border: 1px solid black;
background-color: lightblue;
width: 300px;
height: 300px;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<p>div এলিমেন্টের পজিশন পরিবর্তন করার জন্য "চেষ্টা করি" বাটনে ক্লিক করি</p>
<button onclick="myFunction()">চেষ্টা করি</button>
<div id="myDIV">
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
<p>ইহা একটি div এলিমেন্ট</p>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
একটা এলিমেন্ট তার নরমাল অবস্থান সাপেক্ষে কিভাবে অবস্থান নেয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body>
<h2>কোন পজিশন ছাড়াই হেডিং</h2>
<h2 class="pos_left">নরমাল পজিশনের চেয়ে বামে</h2>
<h2 class="pos_right">নরমাল পজিশনের চেয়ে ডানে</h2>
</body>
</html>
ফলাফল
position প্রোপার্টির ভ্যালু-সমূহ
- static - এটি ডিফল্ট ভ্যালু।
- absolute - এলিমেন্টের পূর্বের অবস্থানের সাপেক্ষে নতুন অবস্থান তৈরি করে।
- fixed - ব্রাউজারের উইন্ডোর সাপেক্ষে এলিমেন্ট নতুন অবস্থান নেয়।
- relative - এলিমেন্টের নরমাল অবস্থানের সাপেক্ষে অবস্থান নেয়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
position প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।