how can we make one div in front on another div?
A:
Use the z-index property
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
or
Use the position property
h2
{
position:absolute;
left:100px;
top:150px;
}
Brian R. Bondy
2010-04-01 13:50:42
oh wow, that was quite a lot of posts at the same time, all pretty much saying the same thing.
quoo
2010-04-01 13:52:29
+2
A:
You can do that with CSS absolute positioning and z-index.
<style type="text/css">
div { border:1px solid black; }
.infront {
background-color:#ff9900;
width:100px;
height: 100px;
position: relative;
top: 10;
left:80;
z-index: 2;
}
.behind {
background-color:#eeeeee;
width:100px;
height: 100px;
position: relative;
top: -60;
left:35;
z-index: 1;
}
</style>
<div class="infront">
In front
</div>
<div class="behind">
Behind
</div>
Sarfraz
2010-04-01 13:51:05
A:
Use absolute positioning in CSS:
#divbox {
position: absolute;
top: 0;
right: 0;
}
There's also great article regarding positioning of elements in CSS:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Ondrej Slinták
2010-04-01 13:51:12
A:
You should make one div with position:relative or position:absolute and add a value of z-index, e.g.:
<!-- Assuming that this is the only content of the <body> element -->
<div style="position:absolute; z-index:10; top:10px; height:40px;"></div>
<div style="height:500px;"></div>
To distinguish, add a solid border to the DIVs.
Refer to:
Dor
2010-04-01 13:52:27