Как заставить div пойти за другим div?

Ответ 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;
}

Причина, по которой вы получаете много разных ответов, состоит в том, что вы не объяснили, что именно хотите. Все ответы, полученные с кодом, будут программно правильными, но все зависит от того, чего вы хотите достичь.

Ответ 2

Вам нужно добавить z-index в divs с положительным числом для верхнего div и отрицательным для div ниже

пример

Ответ 3

Чтобы ответить на вопрос в общем виде:

Использование z-index позволит вам управлять этим. см. z-index в 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, который вы хотите поставить перед собой. Это не логически возможно.

Ответ 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, т.е. если они являются плавающими или абсолютными и т.д.

Ответ 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>