div को दूसरे div के पीछे कैसे जाना है?

Question

मैं "बॉक्स-बाएं-मिनी" को div के सामने जाने की कोशिश कर रहा हूं जो नीचे है।

<div class="box-left-mini"> 
    this div is infront 
    <div style="background-image:url(/images/hotcampaigns/campaign-sample.png);height:100px;width:100px;"> 
     this div is behind 
    </div> 
</div> 

सीएसएस box-left-mini के लिए है:

.box-left-mini { 
    float:left; 
    background-image:url(website-content/hotcampaign.png); 
    width:292px; 
    height:141px; 
} 

Answer 1

http://jsfiddle.net/f2znvn4f/

---

एचटीएमएल div के लिए शीर्ष div और नकारात्मक के लिए divs में जोड़ने के लिए, एक सकारात्मक संख्या के साथ की जरूरत है

<div class="box-left-mini"> 
    <div class="front"><span>this is in front</span></div> 
    <div class="behind_container"> 
     <div class="behind">behind</div>   
    </div> 
</div> 

---

सीएसएस

.box-left-mini{ 
    float:left; 
    background-image:url(website-content/hotcampaign.png); 
    width:292px; 
    height:141px; 
} 

.box-left-mini .front { 
    display: block; 
    z-index: 5; 
    position: relative; 
} 
.box-left-mini .front span { 
    background: #fff 
} 

.box-left-mini .behind_container { 
    background-color: #ff0; 
    position: relative; 
    top: -18px; 
} 
.box-left-mini .behind { 
    display: block; 
    z-index: 3; 
} 

---

कारण आप बहुत से अलग जवाब हो रही है क्योंकि आप नहीं समझाया गया है कि तुम क्या वास्तव में क्या करना चाहते हैं है।सभी प्रश्नों के उत्तर कोड के साथ प्राप्त प्रोग्राम के रूप में सही हो जाएगा, लेकिन यह आप क्या हासिल करना चाहते करने के लिए सभी नीचे है

Answer 2

एक सामान्य तरीके से इस सवाल का जवाब करने के लिए:

z-index का उपयोग करते हुए आप इस पर नियंत्रण कर पाएँगे। z-index at csstricks देखें।

उच्च z-index के तत्व कम z-index के तत्वों के शीर्ष पर प्रदर्शित किया जाएगा।

उदाहरण के लिए, निम्न HTML ले:

<div id="first">first</div> 
<div id="second">second</div> 

अगर मैं निम्नलिखित सीएसएस है:

#first { 
    position: fixed; 
    z-index: 2; 
} 

#second { 
    position: fixed; 
    z-index: 1; 
} 

#first#second के शीर्ष पर हो wil।

लेकिन विशेष रूप से अपने मामले में:

div तत्व div है कि आप सामने डाल करना चाहते हैं का एक बच्चा है। यह तार्किक रूप से संभव नहीं है।

Answer 3

आप z-index नीचे

example

Answer 4

एक संभव इस तरह हो सकता है,

एचटीएमएल

<div class="box-left-mini"> 
    <div class="front">this div is infront</div> 
    <div class="behind"> 
     this div is behind 
    </div> 
</div> 

सीएसएस

.box-left-mini{ 
float:left; 
background-image:url(website-content/hotcampaign.png); 
width:292px; 
height:141px; 
} 
.front{ 
    background-color:lightgreen; 
} 
.behind{ 
    background-color:grey; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    z-index:-1; 
} 

http://jsfiddle.net/MgtWS/

लेकिन क्या यह वास्तव में यदि वे तैर रहे हैं, या निरपेक्ष तैनात आदि

Answer 5

container can not come front to inner container. but try this below : 

Css : 
---------------------- 
.container { position:relative; } 
    .div1 { width:100px; height:100px; background:#9C3; position:absolute; 
      z-index:1000; left:50px; top:50px; } 
    .div2 { width:200px; height:200px; background:#900; } 

HTMl : 
----------------------- 
<div class="container"> 
    <div class="div1"> 
     Div1 content here ......... 
    </div> 
    <div class="div2"> 
     Div2 contenet here ......... 
    </div> 
</div>