दिलचस्प पोस्ट
एक दुभाषिया / संकलक काम कैसे करता है MySQL महीने के रिकॉर्ड का चयन करने के लिए भले ही डेटा मौजूद न हो मैं किस चेकबॉक्स को चेक करता हूं? क्या node.js के साथ डेस्कटॉप अनुप्रयोग बनाना संभव है? VBA (एक्सेल) में पंक्तियों के माध्यम से लूप का सबसे प्रभावी / तेज़ तरीका क्या है? संपत्ति / www निर्देशिका से फ़ाइलों का उपयोग करें phantomjs "पूर्ण" पृष्ठ लोड के लिए इंतजार नहीं कर रहा है 'पीआईपी' को आंतरिक या बाहरी कमान के रूप में मान्यता नहीं दी गई है स्ट्रिंग PHP से ट्रेलिंग स्लैश निकालें कैसे jQuery में radiobuttons रीसेट करने के लिए कि कोई भी जाँच की है जब ऐप पृष्ठभूमि से वापस आ जाता है तो क्यों नहीं विलियपियर को कॉल नहीं किया जाता? SQL Server 2005 टी-एसक्यूएल में बेस 64 एन्कोडिंग जब SqlCommand पैरामीटर्स जोड़ते समय "SqlDbType" और "आकार" का उपयोग किया जाना चाहिए? सशर्त मर्ज / आर में प्रतिस्थापन स्प्रिंग परीक्षण में स्कोप सेम का अनुरोध करें

कैसे सीएसएस स्थिति काम करती है, क्यों एक दूसरे के बाद एक स्टैकिंग के बजाय पूर्ण तत्व एक दूसरे पर ढेर हो जाते हैं

निम्नलिखित कोड में #row2 1 और #row2 दोनों को कैसे दिखाई दे सकता है, एक खड़ी दूसरे के बाद, जैसे कि कोई absolute/relative स्थिति शामिल नहीं है?

 <body> <div class="container"> <div id="row1" class="row"> <div class="col1">Hello</div> <div class="col2">World</div> </div> <div id="row2" class="row"> <div class="col1">Salut</div> <div class="col2">le monde</div> </div> </div> 

 body {position:relative;} .container {position:absolute;} .row {position:relative;} .col1, .col2 {position: absolute;} 

http://jsfiddle.net/wjrNQ/

अद्यतन करें

मुझे तत्वों को सीएसएस नियमों में प्रदान की जाने वाली पोजिशनिंग की ज़रूरत है, यहां दिए गए कारणों के लिए तो मेरा प्रश्न यह है कि क्या उपरोक्त सीएसएस को हटाने के बिना मुझे क्या हासिल करना संभव है? Ie होने के दो .row div "सामान्य" block तत्वों के रूप में प्रकट होने के लिए

अपडेट 2

यदि पर्याप्त ऊंचाई px में निर्दिष्ट है, परिणाम की उम्मीद की उम्मीद है। लेकिन सामग्री प्रोग्राममैटैमैटिकल गतिशील है इसलिए मुझे पहले से ऊँचाई नहीं पता है 🙁

Solutions Collecting From Web of "कैसे सीएसएस स्थिति काम करती है, क्यों एक दूसरे के बाद एक स्टैकिंग के बजाय पूर्ण तत्व एक दूसरे पर ढेर हो जाते हैं"

अच्छी तरह से आपके पास कुछ अजीब इच्छाएं हैं, इसलिए मुझे आपको समझाएं कि उन स्थितियों का वास्तव में सीएसएस में क्या अर्थ है और वे कैसे काम करते हैं, position: relative; का उपयोग कर position: relative; सिर्फ static position का उपयोग कर रहा है, अंतर एक तत्व की position: relative; बना रहा है position: relative; , आप top , right , bottom और left गुणों का उपयोग करने में सक्षम होंगे, हालांकि तत्व आगे बढ़ जाएगा, लेकिन शारीरिक रूप से यह दस्तावेज़ प्रवाह में होगा ..

यहां छवि विवरण दर्ज करें

position: absolute; आ रहा है position: absolute; , जब आप कोई तत्व position: absolute; बनाते हैं position: absolute; , यह दस्तावेज़ के प्रवाह से बाहर हो जाता है, इसलिए, इसका किसी भी अन्य तत्व से कोई लेना देना नहीं है, इसलिए आपके उदाहरण में आपके पास। .col1, .col2 {position: absolute;} जो absolute स्थिति में हैं और क्योंकि दोनों दस्तावेज़ से बाहर हैं प्रवाह, वे ओवरलैप करेंगे … क्योंकि वे पहले से ही position: absolute; तहत नेस्टेड हैं position: absolute; माता-पिता या। .container और कोई width नहीं दी गई है, तो यह न्यूनतम width लेगा और इसलिए, यदि आप अपना सीएसएस बदल नहीं सकते हैं, तो अपने तत्वों को ओवरलैप कर सकते हैं (जो मेरे अनुसार कोई भी अर्थ नहीं है कि आप क्यों नहीं बदल सकते) फिर भी आप चाहते हैं, आप कर सकते हैं यह ..

डेमो (अपनी किसी भी position को हटाने के बिना) और यह वास्तव में गंदी है


वर्णों के लिए, यह top पर होगा क्योंकि आपका कंटेनर तत्व प्रवाह से बाहर है, और इसलिए, दस्तावेज़ प्रवाह में कोई height नहीं माना जाएगा, जब तक कि आप उस तत्व को कुछ तत्व में लपेटकर नहीं लेते हैं , margin padding या सीएसएस स्थिति निर्धारण


सीएसएस पदों समझाया

जैसा कि मैंने टिप्पणी की, यहां कुछ उदाहरण हैं कि कैसे सीएसएस स्थिति निर्धारण वास्तव में काम करता है, शुरू करने के लिए, position संपत्ति के लिए 4 मान हैं जो static जो कि एक डिफ़ॉल्ट, relative , absolute और fixed , इसलिए static शुरू होता है, यहां बहुत कुछ सीखना नहीं है , तत्व सिर्फ एक दूसरे के नीचे स्टेकअप नहीं जब तक कि वे फ़ोटेट या display: inline-block नहीं करते हैं display: inline-block , लेकिन static स्थिति वाला, top , right

डेमो


position: relative; लिए आ रहा है position: relative; मैंने पहले से ही आपको सामान्य रूप में समझाया है, यह कुछ भी नहीं है लेकिन static , यह अन्य तत्वों पर ढेर हो जाता है, यह दस्तावेज़ के प्रवाह में है, लेकिन आप top , right , bottom और left right position तत्वों को भौतिक रूप से, प्रवाह में रहता है, केवल तत्व की position बदल जाती है।

डेमो 2


अब absolute होता है, आम तौर पर कई लोग समझने में विफल रहते हैं, जब एक तत्व absolute बनाते हैं तो यह दस्तावेज़ के प्रवाह से बाहर निकलता है, और इसलिए यह स्वतंत्र रहता है, अन्य तत्वों की स्थिति के साथ इसका कोई लेना-देना नहीं है, जब तक कि यह अन्य position: absolute तत्व जो हो सकता है स्टैक स्तर को बदलने के लिए z-index का उपयोग कर निश्चित करें। यहां याद रखने वाली मुख्य बात यह है कि वह position: relative; कंटेनर ताकि आपके absolute स्थित तत्व उस relative तत्व के relative है, अन्यथा आपका तत्व जंगली में उड़ जाएगा

यह उस position: absolute; ध्यान में रखना महत्वपूर्ण है position: absolute; तत्व जब absolute; स्थित absolute; एक absolute स्थिति वाले मूल तत्व के अंदर, तुलना में यह उस तत्व के सापेक्ष है और जो कि दादा मूल तत्व के सापेक्ष नहीं है जो कि relative स्थित हो

डेमो 3 (बिना position: relative; कंटेनर)

डेमो 4 ( position: relative; साथ position: relative; कंटेनर)


पिछला position fixed , यह absolute समान है, लेकिन जब आप स्क्रॉल करते हैं, तब यह प्रवाह होता है, यह दस्तावेज़ के प्रवाह से बाहर है, लेकिन यह स्क्रॉल भी, position: fixed; तत्व किसी भी प्रकार के किसी भी कंटेनर तत्व के relative नहीं हो सकता है, न कि relative भी, position fixed तत्व हमेशा व्यूपोर्ट के relative है, इसलिए डिजाइनर position: absolute; उपयोग position: absolute; जब वे एक fixed position व्यवहार चाहते हैं, लेकिन अभिभावक के relative और top संपत्ति पर onScroll

डेमो 5

सीएसएस position संपत्ति को संशोधित किए बिना आप क्या चाहते हैं, संभव नहीं है हालांकि, मौजूदा CSS को छूने के बिना आप क्या कर सकते हैं, यह एक अधिक विशिष्ट चयनकर्ता के साथ ओवरराइड कर रहा है

 .row .col1, .row .col2 { position: relative; } 

JSFiddle देखें

जब position:relative का उपयोग किया जाता है, पृष्ठ लेआउट आमतौर पर top, left मानों द्वारा ऑफ़सेट होने से पहले हो , लेकिन स्थिति: पूर्ण दस्तावेज़ प्रवाह को अनदेखा कर देगा। relative कोई बदलाव नहीं करेंगे, परन्तु पूर्ण को बदला जाना चाहिए

 .col1, .col2 {display:inline-block;} 

http://jsfiddle.net/C4bQN/

संपादित करें: आपकी परिस्थितियों के आधार पर, शायद आप अपनी मेज को एक पूर्ण स्थिति में रख सकते हैं तो टेबल के भीतर सामान्य दस्तावेज़ प्रवाह का उपयोग करें?

 <div class="absolute-wrap"> <div class="row"> <div class="col"> </div> </div> </div>