Jak zrobić div za innym div?

Question

Próbuję zrobić "box-left-mini" przed numerem div, który znajduje się poniżej.

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

CSS dla box-left-mini jest:

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

---

Powodem dostajesz tyle różnych odpowiedzi, ponieważ nie jest już wyjaśnione, co chcesz dokładnie zrobić.Wszystkie odpowiedzi dostaniesz z kodem będzie programowo poprawne, ale to wszystko do tego, co chcesz osiągnąć

Answer 2

Aby odpowiedzieć na pytanie, w sposób ogólny:

Korzystanie z-index pozwoli na kontrolowanie tego. patrz z-index at csstricks.

Element o wyższej wartości z-index zostanie wyświetlony na elementach niższego z-index.

Na przykład podjąć następujące HTML:

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

Jeśli mam następujący CSS:

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

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

#first wil być na szczycie #second.

Ale szczególnie w przypadku:

Element div jest dzieckiem div, które chcesz umieścić w przód. To nie jest logicznie możliwe.

Answer 3

Trzeba dodać z-index do div, a liczbę dodatnią dla górnej div i negatywne dla div poniżej

example

Answer 4

Jedną z możliwości może być tak,

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/

Ale to naprawdę zależy od układu swoimi elementami div to znaczy, jeśli są pływające lub absolutny umieszczony itp

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>