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

我试图让“盒子左迷你”走在前面 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;
}

4475

2017-10-24 09:08

起源

使用z-index来完成您期望的结果。 - Rafael

做一个的jsfiddle - JoDev

不值得投票，这是一个真正的问题，试图解决问题。 - SaturnsEye

答案:

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

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

2017-10-24 09:17

jsfiddle是空的 - 416E64726577

你需要添加 z-index 到divs，顶部div的正数和下面div的负数

例

2017-10-24 09:14

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

运用 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 你希望放在前面。这在逻辑上是不可能的。

2017-10-24 09:12

一种可能是这样的，

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

2017-10-24 09:17

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>

2017-10-24 09:21

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

答案:

热门问题

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