如何让 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>

box-left-mini 的 CSS 是：

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

原文由 Jayden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你得到如此多不同答案的原因是你没有准确解释你想做什么。您通过代码获得的所有答案在编程上都是正确的，但这完全取决于您想要实现的目标

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

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

原文由 Richard Peck 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 .one {

    position:absolute;
    z-index:999;
}

.one {
    position:absolute;
    z-index:-999;
}

 <div class="one">
   this div is infront
</div>
    <div class="two">
        this div is behind
    </div>

原文由 SaturnsEye 发布，翻译遵循 CC BY-SA 4.0 许可协议