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

Question

我试图让"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>

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

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

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

Answer 2

笼统地回答这个问题：

使用z-index将允许您控制这一点。请参阅csstricks 中的 z-index。

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

例如，采用以下 HTML：

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

如果我有以下 CSS：

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

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

#first将在#second.

但特别是在你的情况下：

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

Answer 3

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

例