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;
}
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;
}
The reason you're getting so many different answers is because you've not explained what you want to do exactly. All the answers you get with code will be programmatically correct, but it's all down to what you want to achieve
One possible could be like this,
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;
}
But it really depends on the layout of your div elements i.e. if they are floating, or absolute positioned etc.
You need to add z-index to the divs, with a positive number for the top div and negative for the div below
To answer the question in a general manner:
Using z-index will allow you to control this. see z-index at csstricks.
The element of higher z-index will be displayed on top of elements of lower z-index.
For instance, take the following HTML:
<div id="first">first</div>
<div id="second">second</div>
If I have the following CSS:
#first {
position: fixed;
z-index: 2;
}
#second {
position: fixed;
z-index: 1;
}
#first wil be on top of #second.
But specifically in your case:
The div element is a child of the div that you wish to put in front. This is not logically possible.
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>
Source: Stackoverflow.com