दो divs के साथ एक और

Question

मैं कुछ HTML है एक के ऊपर एक div प्रदर्शित:

<div> 
    <div id="backdrop"><img alt="" src='/backdrop.png' /></div> 
    <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div> 
</div> 

मैं दूसरी div #curtain div #backdrop के शीर्ष पर प्रदर्शित करना चाहते हैं। दो divs एक ही आकार के हैं, हालांकि मुझे यकीन नहीं है कि दूसरे div के ऊपर दूसरे div को कैसे स्थानांतरित किया जाए।

Answer 1

ऐसा करने के कई तरीके हैं, लेकिन यह बहुत आसान है और इनलाइन सामग्री स्थिति को बाधित करने के साथ समस्याओं से बचाता है। आपको भी मार्जिन/पैडिंग के लिए समायोजित करने की आवश्यकता हो सकती है।

#backdrop, #curtain { 
    height: 100px; 
    width: 200px; 
} 

#curtain { 
    position: relative; 
    top: -100px; 
} 

Answer 2

उपयोग सीएसएस position: absolute; प्रत्येक DIV के style विशेषता में top: 0px; left 0px; द्वारा पीछा किया। पिक्सेल मानों को जो कुछ भी आप चाहते हैं उसे बदलें।

लंबवत "ऑर्डर" सेट करने के लिए आप z-index: x; का उपयोग कर सकते हैं (जो कि "शीर्ष पर है")। x को एक संख्या के साथ बदलें, उच्च संख्याएं निम्न संख्याओं के शीर्ष पर हैं।

यहां आपके नए कोड इस तरह दिखाई देंगे है:

<div> 
    <div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src='/backdrop.png' /></div> 
    <div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div> 
</div> 

Answer 3

यहाँ jsFiddle

#backdrop{border:2px solid red; 
width:400px; 
    height:200px; 
    position:absolute; 
} 

#curtain { 
    border:1px solid blue; 
    width:400px; 
    height:200px; 
    position:absolute; 
} 

उपयोग Z- इंडेक्स एक आप शीर्ष पर ले जाने के लिए चाहते है।

• बाहरी div: position: relative
• आंतरिक div: position: absolute

मैं एक पाया

Answer 4

ठीक से एक और एक के ऊपर एक div प्रदर्शित करने के लिए, हम इस प्रकार संपत्ति position उपयोग करने की आवश्यकता अच्छा उदाहरण here:

.dvContainer { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #ccc; 
 
} 
 

 
.dvInsideTL { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: #ff751a; 
 
    opacity: 0.5; 
 
}

<div class="dvContainer"> 
 
    <table style="width:100%;height:100%;"> 
 
    <tr> 
 
     <td style="width:50%;text-align:center">Top Left</td> 
 
     <td style="width:50%;text-align:center">Top Right</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width:50%;text-align:center">Bottom Left</td> 
 
     <td style="width:50%;text-align:center">Bottom Right</td> 
 
    </tr> 
 
    </table> 
 
    <div class="dvInsideTL"> 
 
    </div> 
 
</div>

मुझे आशा है कि इस मदद करता है,
ज़ाग।