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