CSS-এ নেগেটিভ মান দিয়ে পজিশনিং

আমরা যে বৈশিষ্ট্যগুলো শিখেছি top, right, bottom এবং left শুধুমাত্র ইতিবাচকই নয়, নেগেটিভও গ্রহণ করতে পারে। আসুন উদাহরণ দিয়ে দেখি।

উদাহরণ

নিম্নলিখিত উদাহরণে, এলিমেন্টটি তার প্যারেন্টের সাপেক্ষে সম্পূর্ণরূপে পজিশন করা হয়েছে এবং উপরে 0, বামে 0 অবস্থানে রয়েছে:

html<div id="parent">
  <div id="child"></div>
</div>

css#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 বামে অবস্থানে নিয়ে যাই:

html<div id="parent">
  <div id="child"></div>
</div>

css#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;
}

Результат: