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;
}परिणाम:
