दिलचस्प पोस्ट
"+ N" मान स्टैक ट्रेस में किसी विधि नाम के अंत में क्या मतलब है? आईओएस एप्स में डेटा के साथ काम करना (क्या चुनना है? एनएसडीटा, कोरडेटा, एसक्लाइट, प्लिस्ट, एनएसयूएसर डेफल्स) Urllib, urllib2 और अनुरोध मॉड्यूल के बीच अंतर क्या हैं? जब एक वेब पेज लोड होता है, तो आप अपने आप एक टेक्स्टबॉक्स पर ध्यान केंद्रित कैसे करते हैं? एंड्रॉइड में बाहरी फोंट का उपयोग करें पायथन एक बच्चे को उपप्रक्रिया, अलग करना, और बाहर निकलने से उत्पन्न होता है क्या जावास्क्रिप्ट में ऑब्जेक्ट घोषित होने के दौरान मैं अन्य प्रॉपर्टी का संदर्भ दे सकता हूं? अमान्य सीएसएस चयनकर्ता को गिरा दिया जाने वाला नियम बनता है: तर्क क्या है? जावा में एक डिफ़ॉल्ट पैकेज में क्लास आयात करने के लिए सिंटैक्स क्या है? एक स्ट्रिंग के भीतर URL खोजने के लिए नियमित अभिव्यक्ति Java.util.logging.Logger का उपयोग करते समय लॉग फ़ाइल को कैसे लिखना है सीएसवी फ़ाइल आयात। नेट में समान सर्वर पर अपाचे और नोड। जेएस स्थिति बार और नेविगेशन बार आईओएस 7 में मेरे विचार की सीमा पर दिखाई देते हैं प्लग इन स्थापित करने में असमर्थ Grails

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

निम्नलिखित कोड में #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 में निर्दिष्ट है, परिणाम की उम्मीद की उम्मीद है। लेकिन सामग्री प्रोग्राममैटैमैटिकल गतिशील है इसलिए मुझे पहले से ऊँचाई नहीं पता है 🙁

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

अच्छी तरह से आपके पास कुछ अजीब इच्छाएं हैं, इसलिए मुझे आपको समझाएं कि उन स्थितियों का वास्तव में सीएसएस में क्या अर्थ है और वे कैसे काम करते हैं, 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>