एक दूसरे के ऊपर DIVs स्टैकिंग?

Question

क्या कई DIV को स्टैक करना संभव है:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

ताकि उन सभी आंतरिक DIV में समान X और Y स्थिति हो? डिफ़ॉल्ट रूप से वे सभी पिछले पिछले DIV की ऊंचाई से Y स्थिति को बढ़ाते हुए एक दूसरे से नीचे जाते हैं।

मुझे लगता है कि कुछ प्रकार की नाव या प्रदर्शन या अन्य चाल काट सकती है?

संपादित करें: मूल DIV के सापेक्ष स्थिति है, इसलिए, स्थिति का पूर्ण उपयोग करने से काम नहीं लगता है।

Comments

मेरे उत्तर को स्पष्ट करने के लिए, आप आंतरिक विभाजनों को पूर्ण रूप से स्थान देना चाहते हैं।

— मैट

संबंधित: stackoverflow.com/q/2941189/435605

— AlikElzin-kilaka

Answer 1

बाहरी div स्थिति को आप चाहते हैं, लेकिन पूर्ण का उपयोग कर आंतरिक div स्थिति। वे सब ढेर हो जाएंगे।

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

Comments

यह काम करने के लिए प्रतीत नहीं होता है। हो सकता है कि मैंने उल्लेख किया हो कि मेरे पास यह परिदृश्य है: <div style = "स्थिति: निरपेक्ष ..."> <div style = "स्थिति: रिश्तेदार ..."> <div> इस </ div> <div> stack यह </ div> <div> स्टैक इस </ div> <div> स्टैक इस </ div> </ div> </ div>

— टॉवर

आप उन divs को बिलकुल पोज़िशन देना चाहते हैं, जिनमें "स्टैक दिस" है। यह काम करता है - मैंने अपना मूल पोस्ट करने से पहले यह कोशिश की। यदि आप अपने चयनकर्ताओं पर कक्षा चयनकर्ता नहीं लगाते हैं, तो स्टिक डिव का चयन करने के लिए एरिक के उत्तर में div चयन विधि को अनुकूलित करें।

— मैट

मेरे लिए भी काम नहीं किया। दर्शकों के लिए बहुत सारे अनकांशस छोड़ दिए गए।

— यान बेलवेंस

मैं इस स्थिति का उपयोग करते हुए ढेर होने के लिए मिला: सापेक्ष और निर्दिष्ट ऊंचाई

— यान बेलवेंस

यह डिस्प्ले प्रोप के साथ कुछ करने के लिए हो सकता है?

— यान बेलवेंस 15

Answer 2

डेव के जवाब में जोड़ने के लिए:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Comments

यह काम करने के लिए प्रतीत नहीं होता है। हो सकता है कि मैंने उल्लेख किया हो कि मेरे पास यह परिदृश्य है: <div style = "स्थिति: निरपेक्ष ..."> <div style = "स्थिति: रिश्तेदार ..."> <div> इस </ div> <div> stack यह </ div> <div> स्टैक इस </ div> <div> स्टैक इस </ div> </ div> </ div>

— टॉवर

मुझे लगता है कि उस मामले में आप "शीर्ष: 0; सेट करना चाहते हैं? छोड़ दिया: 0;" आपके div पर "स्थिति: रिश्तेदार" है। उस पर निश्चित रूप से IE6 का परीक्षण करें, हालांकि मैं निश्चित रूप से यह नहीं कह सकता कि यह काम करेगा।

— एरिक वेन्डेलिन

Answer 3

यदि आप शाब्दिक अर्थ है कि एक को दूसरे के शीर्ष पर रखकर, एक शीर्ष पर (समान एक्स, वाई स्थिति, लेकिन अलग-अलग जेड स्थिति), z-indexसीएसएस विशेषता का उपयोग करके देखें । यह काम करना चाहिए (अप्राप्त)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

यह 4 को 3 के शीर्ष पर, 3 को 2 के शीर्ष पर, और इसी तरह दिखाना चाहिए। उच्च z- इंडेक्स है, उच्च तत्व z- अक्ष पर स्थित है। मैं आशा करता हूं कि इससे आपको मदद मिली होगी :)

Answer 4

style="position:absolute"

Answer 5

मैंने डिव को थोड़ा ऑफसेट किया, ताकि आप इसे काम पर देख सकें।
एचटीएमएल

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

सीएसएस

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

Answer 6

इसे ठीक करने के लिए अब आप CSS ग्रिड का उपयोग कर सकते हैं।

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

और इसके लिए सीएसएस:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

Answer 7

मुझे पता है कि यह पोस्ट थोड़ी पुरानी है लेकिन मुझे भी यही समस्या थी और इसे कई घंटे ठीक करने की कोशिश की गई। अंत में मुझे समाधान मिल गया:

अगर हमारे पास 2 बॉक्स हैं, तो वे फोड़े पर तैनात हैं

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

हम उम्मीद करते हैं कि स्क्रीन पर एक बॉक्स होगा। ऐसा करने के लिए हमें मार्जिन-नीचे -height के बराबर सेट करना होगा, इसलिए इस तरह करना:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

मेरे लिए ठीक काम करता है।

Answer 8

मेरी वही आवश्यकता थी जिसे मैंने नीचे दिए गए लेख में देखा है।

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview