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

CSS দিয়ে এলিমেন্টকে কন্টেইনারের নিচে পিন করা

CSS দিয়ে কোনো এলিমেন্টকে তার কন্টেইনারের নিচে (bottom) পিন করার পদ্ধতি শিখুন।

HTML-এ প্যারেন্ট-চাইল্ড রিলেশনশিপ থাকে। চাইল্ড এলিমেন্টকে প্যারেন্ট কন্টেইনারের নিচে রাখতে নিচের প্রপার্টিগুলো লাগে:

  • position: relative; (প্যারেন্ট)
  • position: absolute; (চাইল্ড)
  • bottom: 0; (চাইল্ড)

উদাহরণ

<div class="parent"> 
  <div class="child"></div> 
</div>
.parent { position: relative; } 
.child { position: absolute; bottom: 0; }

দৃশ্যমান করতে স্টাইলিং

.parent { position: relative; background-color: black; height: 200px; width: 200px; } 
.child { position: absolute; bottom: 0; background-color: darkred; height: 50px; width: 50px; }

চাইল্ড এলিমেন্ট অটোমেটিক্যালি কন্টেইনারের বাম পাশে পিন হয়।

নিচে ডানে (bottom-right) পিন করতে

.child { position: absolute; bottom: 0; right: 0; }
  1. CSS দিয়ে রেসপন্সিভ ফ্লোটিং এলিমেন্ট তৈরি

  2. CSS দিয়ে ব্রাউজার উইন্ডোর পুরো উচ্চতায় এলিমেন্ট ফैलানো

  3. CSS Flex দিয়ে উপাদানকে কন্টেইনারের নিচে পজিশন করা

  4. CSS ব্যবহার করে চাইল্ড এলিমেন্ট সিলেক্ট করা