কম্পিউটার টিউটোরিয়াল

CSS-এ রিলেটিভ পজিশনিং

রিলেটিভ পজিশনিং HTML এলিমেন্টের পজিশনকে সেটি সাধারণত যেখানে থাকে সেখানে থেকে পরিবর্তন করে। অর্থাৎ "left:20" এলিমেন্টের LEFT পজিশনে ২০ পিক্সেল যোগ করে।

position প্রোপার্টির সাথে top এবং left দুটি মান ব্যবহার করে HTML এলিমেন্টকে ডকুমেন্টের যেকোনো জায়গায় সরানো যায়।

  • বামে সরান: left-এর জন্য নেগেটিভ মান ব্যবহার করুন।
  • ডানে সরান: left-এর জন্য পজিটিভ মান ব্যবহার করুন।
  • উপর সরান: top-এর জন্য নেগেটিভ মান ব্যবহার করুন।
  • নিচে সরান: top-এর জন্য পজিটিভ মান ব্যবহার করুন।

উদাহরণ

নিচের কোডটি রান করে রিলেটিভ পজিশনিং বুঝতে পারেন:

<html>
  <head></head>
  <body>
    <div style="position:relative; left:80px; top:2px; background-color:yellow;">
      This div has relative positioning.
    </div>
  </body>
</html>
  1. CSS position: relative

  2. CSS রিলেটিভ পজিশনিং

  3. CSS-এ Relative Positioning

  4. CSS দিয়ে ফ্লোটিং এলিমেন্টস