CSS के साथ इसके कंटेनर के नीचे तत्वों को कैसे रखा जाए

CSS के साथ तत्वों को उसके कंटेनर के नीचे रखना सीखें।

एचटीएमएल में अभिभावक-बाल संबंध हैं। CSS के साथ एक तत्व को उसके कंटेनर के नीचे रखने के लिए, आपको निम्नलिखित गुणों और मूल्यों का उपयोग करने की आवश्यकता है:

• 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;
}

परिणाम:

जैसा कि आप ऊपर दिए गए उदाहरण में देख सकते हैं, चाइल्ड एलिमेंट अपने आप कंटेनर के बाईं ओर पिन हो जाता है।

यदि आप चाइल्ड एलिमेंट को नीचे-दाईं ओर रखना चाहते हैं, तो आपको इसे सीधे चाइल्ड एलिमेंट पर right के साथ निर्दिष्ट करना होगा संपत्ति:

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

परिणाम: