CSS: बिना ऊँचाई निर्दिष्ट किए दो तत्वों को एक दूसरे के ऊपर कैसे रखें?

Question

मेरे पास दो DIV हैं जिन्हें मुझे एक दूसरे के शीर्ष पर स्थित करने की आवश्यकता है। हालाँकि, जब मैं ऐसा करता हूं, तो प्रारूपण सभी खराब हो जाता है क्योंकि इसमें युक्त DIV कार्य करता है जैसे कोई ऊंचाई नहीं है। मुझे लगता है कि यह अपेक्षित व्यवहार है, position:absoluteलेकिन मुझे इन दोनों तत्वों को एक-दूसरे के ऊपर रखने के लिए एक रास्ता खोजने की आवश्यकता है और सामग्री के खिंचाव के रूप में कंटेनर को खींचना है:

ऊपरी बाएँ किनारे को ऊपरी बाएँ किनारे के साथ .layer2जोड़ना चाहिएlayer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

Comments

position: absoluteतब उपयोग करने के लिए बिल्कुल सही शैली नहीं है।

— BoltClock

हाँ, position:absoluteसही नहीं लगता। सही शैली क्या होगी?

— एंड्रयू

क्या .layer1और .layer2तत्वों का ज्ञात आकार है?

— म्यू बहुत कम है

नहीं, उनके पास एक अज्ञात आकार भी है।

— एंड्रयू

Answer 1

सबसे पहले, आपको वास्तव में पूरी तरह से तैनात तत्वों पर स्थिति को शामिल करना चाहिए या आप विषम और भ्रमित व्यवहार में आएंगे; आप शायद top: 0; left: 0अपने बिल्कुल तैनात तत्वों दोनों के लिए CSS में जोड़ना चाहते हैं। आप यह भी है चाहता हूँ position: relativeपर .container_rowअगर आप चाहते हैं पूरी तरह से तैनात तत्वों तैनात होना नहीं बल्कि दस्तावेज़ के शरीर की तुलना में उनके माता-पिता के संबंध में :

यदि तत्व में 'स्थिति: निरपेक्ष' है, तो सम्‍मिलित ब्‍लॉक को निकटतम पूर्वज द्वारा 'पूर्ण', 'सापेक्ष' या 'नियत' की स्थिति के साथ स्‍थापित किया जाता है ...

आपकी समस्या यह है कि position: absoluteतत्वों को सामान्य प्रवाह से हटा दिया जाता है :

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

इसका मतलब यह है कि पूरी तरह से तैनात तत्वों का उनके मूल तत्व के आकार पर कोई प्रभाव नहीं पड़ता है और आपके पहले <div class="container_row">की ऊंचाई शून्य होगी।

इसलिए आप वह नहीं कर सकते जो आप पूरी तरह से तैनात तत्वों के साथ करने की कोशिश कर रहे हैं जब तक कि आप नहीं जानते कि वे कितने लंबे होने जा रहे हैं (या, समकक्ष, आप उनकी ऊंचाई निर्दिष्ट कर सकते हैं)। यदि आप ऊंचाइयों को निर्दिष्ट कर सकते हैं तो आप समान ऊंचाइयों को रख सकते हैं .container_rowऔर सब कुछ लाइन में आ जाएगा; तुम भी पूरी तरह से तैनात तत्वों के लिए जगह छोड़ने के margin-topलिए दूसरे पर डाल सकते .container_rowहैं। उदाहरण के लिए:

http://jsfiddle.net/ambiguous/zVBDc/

Comments

शानदार जवाब, धन्यवाद! मुझे लगता है कि मुझे जावास्क्रिप्ट का उपयोग करके गतिशील रूप से ऊंचाई का पता लगाने की आवश्यकता हो सकती है। मैं बस उम्मीद कर रहा था कि यह उस पर नहीं आएगा। = [

— एंड्रयू

@Andrew: हाँ, CSS के वर्टिकल साइज़िंग / पोज़िशन / अलाइनमेंट सिस्टम में आपका स्वागत है: यदि आप उन चीजों के विशिष्ट आकारों को नहीं जानते हैं जो आप आमतौर पर भाग्य से बाहर हैं। क्षैतिज सामान से निपटना आसान है, लेकिन इसमें से अधिकांश अभी भी बदबू आ रही है जैसे इसे "डायनेमिक लेआउट" के बजाय "फिक्स्ड लेआउट प्रिंट लोगों" द्वारा डिज़ाइन किया गया था।

— म्यू बहुत कम

कोई position: absoluteजरूरत नहीं । कृपया जांच करें: stackoverflow.com/a/51949049/1736186

— इसके बजाय

Answer 2

वास्तव में यह स्थिति के बिना absoluteऔर किसी भी ऊंचाई को निर्दिष्ट करने के लिए संभव है ।आपको बस इतना करना है, display: gridमूल तत्व पर उपयोग करना है और वंश को एक ही पंक्ति और स्तंभ में डालना है।

कृपया नीचे दिए गए उदाहरण की जाँच करें, जो आपके HTML पर आधारित है। मैंने ही जोड़ा<span> और कुछ रंग हैं, इसलिए आप परिणाम देख सकते हैं।

आप z-indexइसकी दृश्यता में हेरफेर करने के लिए आसानी से प्रत्येक वंशज तत्वों को बदल सकते हैं (जो शीर्ष पर होना चाहिए)।

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...<br>Test test</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Comments

अच्छा लगा। लेकिन निष्पक्ष होने के लिए, display: gridसात साल पहले अस्तित्व में नहीं था :)

— म्यू बहुत कम है

नीचे एक और उत्तर दिया गया है, @Cornelius द्वारा लिखा गया है। वह उपयोग करता है flex, जिसके पास आजकल बेहतर ब्राउज़र समर्थन है।

— ओलेग चेर

Answer 3

महान जवाब, "म्यू बहुत छोटा है"। मैं ठीक यही बात चाह रहा था, और आपकी पोस्ट पढ़ने के बाद मुझे एक समाधान मिला जिसने मेरी समस्या को हल कर दिया।

मेरे पास एक ही आकार के दो तत्व थे और उन्हें ढेर करना चाहता था। जैसा कि प्रत्येक का एक ही आकार होता है, जो मैं कर सकता था वह बनाना था

position: absolute;
top: 0px;
left: 0px;

केवल अंतिम तत्व पर। इस तरह पहला तत्व सही ढंग से डाला गया है, माता-पिता की ऊंचाई को "धक्का", और दूसरा तत्व शीर्ष पर रखा गया है।

आशा है कि यह अन्य लोगों को समान (अज्ञात) ऊंचाई के साथ 2+ तत्वों को ढेर करने की कोशिश कर रहा है।

Comments

ध्यान दें: इस दृष्टिकोण के साथ, आप अभी भी पता करने के लिए जो तत्व लम्बे एक है, इसलिए है कि आप कर सकते हैं की आवश्यकता होगी अन्य एक। position: aboslute

— एलेक

Answer 4

यहाँ प्रदर्शन का उपयोग कर एक और समाधान है: स्थिति के बजाय फ्लेक्स: निरपेक्ष या प्रदर्शन: ग्रिड।

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Comments

महान समाधान। धन्यवाद!

— ओलेग चेर

Answer 5

मुझे सेट करना पड़ा

कंटेनर_हाइट = एलिमेंट १_हाइट = एलिमेंट २_हाइट

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

Z- इंडेक्स का उपयोग करके सेट कर सकते हैं कि कौन सा शीर्ष पर है।

Answer 6

यहाँ कुछ पुन: प्रयोज्य सीएसएस है जो उपयोग किए बिना प्रत्येक तत्व की ऊंचाई को संरक्षित करेगा position: absolute:

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}

आपके लिए पहला तत्व stackपृष्ठभूमि है, और दूसरा अग्रभूमि है।

Answer 7

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

Answer 8

बेशक, समस्या आपकी ऊंचाई वापस पाने के बारे में है। लेकिन अगर आप समय से पहले ऊंचाई नहीं जानते हैं तो आप ऐसा कैसे कर सकते हैं? ठीक है, अगर आपको पता है कि आप कंटेनर को किस पहलू अनुपात में देना चाहते हैं (और इसे उत्तरदायी रखें), तो आप प्रतिशत के रूप में व्यक्त कंटेनर के किसी अन्य बच्चे के लिए पैडिंग जोड़कर अपनी ऊंचाई वापस पा सकते हैं।

आप divकंटेनर में डमी भी जोड़ सकते हैं और कुछ सेट कर सकते हैंpadding-top: 56.25% डमी तत्व को ऊंचाई देने के लिए जो कंटेनर की चौड़ाई का अनुपात है। यह कंटेनर को बाहर धकेल देगा और इसे एक पहलू अनुपात देगा, इस मामले में 16: 9 (56.25%)।

पैडिंग और मार्जिन चौड़ाई के प्रतिशत का उपयोग करते हैं, यह वास्तव में यहाँ चाल है।

Answer 9

बहुत परीक्षण के बाद, मैंने सत्यापित किया है कि मूल प्रश्न पहले से ही सही है; बस एक-दो सेटिंग्स गायब हैं:

• container_rowहै चाहिएposition: relative;
• बच्चों (...), जरूरी है position: absolute; left:0;
• यह सुनिश्चित करने के लिए कि बच्चे (...) एक दूसरे के ऊपर बिल्कुल संरेखित हों, container_rowअतिरिक्त स्टाइल होना चाहिए:
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; भी, मदद कर सकता है।