27

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

<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 {
    float:left;
    background-image:url(website-content/hotcampaign.png);
    width:292px;
    height:141px;
}
4

5 回答 5

20

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

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

于 2013-10-24T09:17:08.483 回答
10

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

例子

于 2013-10-24T09:14:42.487 回答
5

以一般方式回答问题：

使用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您希望放在前面的元素的子元素。这在逻辑上是不可能的。

于 2013-10-24T09:12:16.073 回答
0

一种可能是这样的，

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 元素的布局，即它们是浮动的还是绝对定位的等。

于 2013-10-24T09:17:09.993 回答
0 
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>
于 2013-10-24T09:21:00.400 回答