सीएसएस - स्थिति डिव के नीचे से div

118

मैं युक्त div के तल पर एक div कैसे स्थिति कर सकता हूँ?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

यह कोड पृष्ठ के निचले भाग में "अंदर" पाठ डालता है।

css position

— nagy.zsolt.hun
स्रोत

.outside जरूरतोंposition: relative;

— पहल

रिश्तेदार, हाँ, और फिर यह नहीं जानता कि बच्चे-तलाक की सामग्री को रखने के लिए कितना बड़ा होना चाहिए, दुर्भाग्य से, इसलिए जब तक कि यह एक स्थिर-मूल्य नहीं है, मूल प्रश्न पर वापस। एक div को दूसरे div के तल पर कैसे रखें (निहित: "सब कुछ तोड़ने के बिना")।

— जोसेफ

जवाबों:

136

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

होने की जरूरत

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

DOM के भीतर पूर्ण रूप से स्थित माता-पिता के लिए पूर्ण स्थिति दिखती है, यदि कोई परिभाषित नहीं करता है तो यह शरीर का उपयोग करेगा।

— कार्ल
स्रोत

धन्यवाद। क्या आप व्यख्या कर सकते हैं?

— nagy.zsolt.hun

absoluteनिकटतम relativeमाता-पिता की खोज करता है । डिफ़ॉल्ट रूप से यह bodyहै document। तो अगर कोई माता पिता डोम वस्तु ( .outside) जा रहा है की संपत्ति है relativeआपके .insideशरीर टैग की तह तक के लिए जाना जाएगा।

" निरपेक्ष स्थिति डोम के भीतर निकटतम अपेक्षाकृत तैनात माता-पिता की तलाश करती है, अगर कोई परिभाषित नहीं करता है कि यह शरीर का उपयोग करेगा। " आपने अभी मेरे लिए इतना समझाया है! अब मैं वास्तव में सीएसएस को समझने लगा हूं। धन्यवाद!

— साइमन फोर्सबर्ग

निरपेक्ष वास्तव में निकटतम नॉन डिफॉल्ट (= स्टेटिक) पूर्वज की खोज करता है, जो अक्सर अपेक्षाकृत स्थिति में होता है। इसका प्रत्यक्ष माता-पिता होना भी जरूरी नहीं है, लेकिन उदाहरण के लिए दादा-दादी हो सकते हैं।

— मझवैल १४'१५ को

यह निरंतर ऊंचाइयों पर निर्भर करता है, जो बहुत ही बुरा है। फ़ॉन्ट, फ़ॉन्ट आकार, पैडिंग, मार्जिन और भगवान का एक सरल परिवर्तन जानता है कि नई ऊंचाई का अनुमान लगाने के लिए और क्या प्रयोग की मांग है।

— एंडरसन

को असाइन position:relativeकरें .outside, और फिर position:absolute; bottom:0;अपने को .inside।

इस तरह:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— dsgriffin
स्रोत

यह एक चिपचिपा पाद के लिए आधार नहीं हो सकता है?

— cade galt

मैं स्थिति का उपयोग नहीं कर सकता: निरपेक्ष; दूसरे तलाक के लिए। यह मेरा प्रतिबंध है, क्या आप मुझे अन्य विकल्प दे सकते हैं?

— पीयूष ढोलरिया

जोड़े position: relativeको .outside। ( https://developer.mozilla.org/en-US/docs/CSS/position )

वे तत्व जो अपेक्षाकृत तैनात हैं, उन्हें अभी भी दस्तावेज़ में तत्वों के सामान्य प्रवाह में माना जाता है। इसके विपरीत, एक तत्व जो बिल्कुल तैनात होता है उसे प्रवाह से बाहर ले जाया जाता है और इस प्रकार अन्य तत्वों को रखने पर कोई स्थान नहीं बनता है। पूरी तरह से तैनात तत्व निकटतम तैनात पूर्वज के सापेक्ष स्थित है। यदि कोई पूर्वज मौजूद नहीं है, तो प्रारंभिक कंटेनर का उपयोग किया जाता है।

"प्रारंभिक कंटेनर" होगा <body>, लेकिन ऊपर जोड़ने से .outsideस्थिति बनती है।

— विस्फोट गोलियां
स्रोत