CSS দিয়ে ছবির ওপর বাটন রাখুন

ছবির ওপর বাটন রাখতে প্যারেন্ট কন্টেইনারের position: relative এবং বাটনের position: absolute ব্যবহার করে top: 50%; left: 50%; transform: translate(-50%, -50%) দিয়ে সেন্টারে পজিশন করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে ছবির ওপর বাটন সেট করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .box { 
        position: relative; 
        width: 100%; 
        max-width: 250px; 
      } 
      .box img { 
        width: 100%; 
        height: auto; 
      } 
      .box .btn { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
      } 
    </style> 
  </head> 
  <body> 
    <div class="box"> 
      <img src="https://www.tutorialspoint.com/videotutorials/images/current_affairs_home.jpg" alt="Current Affairs"> 
      <button class="btn">Button</button> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: top: 50%; left: 50% দিয়ে বাটনের উপরের-বাম কোণকে ছবির কেন্দ্রে আনলো, তারপর transform: translate(-50%, -50%) দিয়ে বাটনকে নিজের আকারের অর্ধেক বাম ও উপরে সরিয়ে পুরোপুরি কেন্দ্রে নিয়ে এসা হয়েছে।