如何使div落后于另一个div？

I am trying to make the "box-left-mini" go in front of the div which is below.

我试图让“box-left-mini”走到下面的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>

The CSS for box-left-mini is:

box-left-mini的CSS是:

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

5 个解决方案

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

---

The reason you're getting so many different answers is because you've not explained what you want to do exactly. All the answers you get with code will be programmatically correct, but it's all down to what you want to achieve

你得到这么多不同答案的原因是因为你没有解释你想要做什么。您使用代码获得的所有答案都将以编程方式正确,但这完全取决于您希望实现的目标

#2

You need to add z-index to the divs, with a positive number for the top div and negative for the div below

您需要将z-index添加到div中,顶部div为正数,下方div为负数

example

#3

To answer the question in a general manner:

以一般方式回答这个问题:

Using z-index will allow you to control this. see z-index at csstricks.

使用z-index将允许您控制它。在csstricks看到z-index。

The element of higher z-index will be displayed on top of elements of lower z-index.

较高z-index的元素将显示在较低z-index的元素之上。

For instance, take the following HTML:

例如,采用以下HTML:

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

If I have the following CSS:

如果我有以下CSS:

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

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

#first wil be on top of #second.

#first将在#second之上。

But specifically in your case:

但特别是在你的情况下:

The div element is a child of the div that you wish to put in front. This is not logically possible.

div元素是您希望放在前面的div的子元素。这在逻辑上是不可能的。

#4

One possible could be like this,

一种可能是这样的,

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/

But it really depends on the layout of your div elements i.e. if they are floating, or absolute positioned etc.

但它实际上取决于你的div元素的布局,即它们是浮动的,还是绝对定位的等等。

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