Wie man div hinter ein anderes div geht?

Question

Ich versuche, die "Box-links-Mini" vor der div, die unten ist, gehen.

<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> 

Die CSS für box-left-mini ist:

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

Answer 1

http://jsfiddle.net/f2znvn4f/

---

HTML

<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> 

CSS

.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; 
} 

---

Der Grund Sie so viele verschiedene Antworten bekommen, weil Sie nicht haben erklärt, was Sie genau tun wollen.Alle Antworten, die Sie mit dem Code erhalten wird programmatisch richtig, aber es ist alles auf, was Sie erreichen wollen

Answer 2

die Frage in allgemeiner Weise zu beantworten:

z-index Verwendung ermöglicht es Ihnen, dies zu kontrollieren. siehe z-index at csstricks.

Das Element der höheren z-index wird über den Elementen der unteren z-index angezeigt.

Nehmen Sie zum Beispiel die folgende HTML:

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

Wenn ich habe folgendes CSS:

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

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

#first oben auf #second wil.

Aber speziell in Ihrem Fall:

Das div Element ist ein Kind des div, die Sie vor setzen möchten. Dies ist logisch nicht möglich.

Answer 3

Sie müssen z-index den divs hinzufügen, mit einer positiven Zahl für die Top-div und negativ für den div unter

example

Answer 4

Eine mögliche so sein könnte,

HTML

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

CSS

.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/

Aber es hängt wirklich von dem Layout Ihrer div Elemente das heißt, wenn sie schwimmen, oder absolut positioniert usw.

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>