CSS দিয়ে ছবির নিচে বাম পাশে টেক্সট পজিশন করুন

ছবির নিচে বাম পাশে টেক্সট রাখতে position: absolute ব্যবহার করে bottom এবং left প্রোপার্টি সেট করতে হয়। প্যারেন্ট কন্টেইনারের position: relative থাকতে হয়।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .box { 
        position: relative; 
      } 
      img { 
        width: 100%; 
        height: auto; 
        opacity: 0.6; 
      } 
      .direction { 
        position: absolute; 
        bottom: 10px; 
        left: 19px; 
        font-size: 13px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Heading One</h1> 
    <p>Below image has text in the bottom left:</p> 
    <div class="box"> 
      <img src="https://www.tutorialspoint.com/python/images/python_data_science.jpg" alt="Tutorial" width="800" height="400"> 
      <div class="direction">Bottom Left Corner</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: .box কন্টেইনারের position: relative থাকায় .direction ক্লাসের position: absolute এলোমেন্টটি বক্সের সাপেক্ষে পজিশন হয়। bottom: 10px; left: 19px; দিয়ে নিচ থেকে ১০পিক্সেল এবং বাম থেকে ১৯পিক্সেল দূরত্বে রাখা হয়েছে।