Question

我正试图制作＆＃34; box-left-mini＆＃34;走到下面的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;
}

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添加到div中，顶部div为正数，div为负数

example

Answer 3

以一般方式回答问题：

使用z-index可以控制此操作。见z-index at csstricks。

较高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 4

一种可能是这样的，

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

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

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>

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

5 个答案: