সিএসএস দিয়ে এর কন্টেইনারের নীচে উপাদানগুলি কীভাবে রাখবেন

সিএসএসের সাহায্যে এর কন্টেইনারের নীচে উপাদানগুলি কীভাবে রাখতে হয় তা শিখুন।

HTML এর একটি পিতামাতা-সন্তানের সম্পর্ক রয়েছে। CSS এর সাথে একটি উপাদানকে এর কন্টেইনারের নীচে রাখতে, আপনাকে নিম্নলিখিত বৈশিষ্ট্য এবং মানগুলি ব্যবহার করতে হবে:

• position: relative; (পিতামাতা)
• position: absolute; (শিশু)
• bottom: 0; (শিশু)

উদাহরণ:

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
}

ভিজ্যুয়ালাইজ করা সহজ করার জন্য আমি উপরে থেকে CSS ক্লাস নিয়েছি এবং সেগুলিতে কিছু প্রস্থ, উচ্চতা এবং রং যোগ করেছি:

.parent {
  position: relative;
  background-color: black;
  height: 200px;
  width: 200px;
}

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

ফলাফল:

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, চাইল্ড এলিমেন্ট স্বয়ংক্রিয়ভাবে তার কন্টেইনারের বাম দিকে পিন করা হয়।

আপনি যদি চাইল্ড উপাদানটিকে নীচে-ডানদিকে রাখতে চান তাহলে আপনাকে right দিয়ে সরাসরি চাইল্ড এলিমেন্টে এটি নির্দিষ্ট করতে হবে সম্পত্তি:

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

ফলাফলঃ