সিএসএস right প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| right | ১.০ | ৫.৫ | ১.০ | ১.০ | ৫.০ |
সংজ্ঞা ও ব্যবহার
absolute পজিশনে থাকা এলিমেন্টের জন্য right প্রোপার্টি এলিমেন্টকে তার কাছাকাছি ancestor পজিশনে থাকা এলিমেন্টের সাপেক্ষে ডানে/বামে অবস্থান দেয়।
পরামর্শঃ
- যদি একটি absolute পজিশনের এলিমেন্টের কোনো ancestors পজিশন না থাকে তাহলে এটি ডকুমেন্ট বডি ব্যবহার করে এবং পেজকে স্ক্রোলিং করে।
- একটি "positioned" এলিমেন্ট স্ট্যাটিক পজিশন গ্রহন করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| auto | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
right: auto/length/initial/inherit;
<div> এলিমেন্টের অবস্থান তার প্যারেন্ট এলিমেন্ট এর সাপেক্ষে ২০ পিক্সেল ডান থেকে বামে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
right: 20px;
width: 200px;
height: 120px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<div class="relative">এই ডিভ এর অবস্থন : relative;
<div class="absolute">এই ডিভ উপাদান অবস্থানে হল: absolute।
এই এলিমেন্ট এর ডান প্রান্ত-এর বাঁদিক থেকে 20 পিক্সেল স্থাপন করা হল (ডিভ এর সাথে class="relative")। </div>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.right="200px"উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
#myDIV {
position: absolute;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>চেষ্টা করি বাটনটি ক্লিক করে Div এলিমেন্টটিকে ডান দিক থেকে 100 px দূরে আনতে পারা যাবে। </p>
<p><strong>নোট:</strong>যদি পজিশন প্রোপার্টি "static" দেওয়া হয় তাহলে ডান দিকের প্রোপার্টির উপর কোন প্রভাব পড়বে না।</p>
<button onclick="myFunction()">চেষ্টা করি</button>
<div id="satt">
<h1>স্যাট</h1>
</div>
<script>
function myFunction() {
document.getElementById("satt").style.right = "100px";
}
</script>
</body>
</html>
ফলাফল
right প্রোপার্টির ভ্যালু-সমূহ
- auto - ব্রাউজারের ডান দিকের পজিশন হিসাব করে। ইহা ডিফল্ট ।
- length - ডান দিকের পজিশনকে px,cm ইত্যাদিতে সেট করে।
- % -এলিমেন্টের পজিশনকে শতকরায় প্রকাশ করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
right প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।