CSS-এ নেগেটিভ মান দিয়ে পজিশনিং
আমরা যে বৈশিষ্ট্যগুলো শিখেছি top, right,
bottom এবং left শুধুমাত্র ইতিবাচকই নয়, নেগেটিভও
গ্রহণ করতে পারে। আসুন উদাহরণ দিয়ে দেখি।
উদাহরণ
নিম্নলিখিত উদাহরণে, এলিমেন্টটি তার প্যারেন্টের সাপেক্ষে সম্পূর্ণরূপে পজিশন করা হয়েছে
এবং উপরে 0, বামে 0 অবস্থানে রয়েছে:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
উদাহরণ
এখন আসুন এলিমেন্টটিকে -20px উপরে,
-30px বামে অবস্থানে নিয়ে যাই:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
নিম্নলিখিত নমুনায়, সবুজ ব্লকটি margin ব্যবহার করে
স্ক্রিনের কেন্দ্রে অবস্থান করছে, এবং
লাল ব্লকগুলি এর সাপেক্ষে পজিশন করা হয়েছে। প্রদত্ত নমুনা অনুযায়ী পৃষ্ঠাটি পুনরাবৃত্তি করুন:
