How to place a div over another div using css??

S

Shark3y3s

New Member
Messages
1
Reaction score
0
Points
0
Hi,

I've have a site coded with divs seperating each section of the webpage, my question is, is there a way i can float another div anywhere above the divs i already have on the page??? here's the following code for my new div i'm trying to float (overlap) the other divs...

div#comments {
position: absolute;
left: 10px;
top: 700px;
width: 700px;
height: 100px;
z-index: 10;
border: 1px solid;
}

it works fine for IE 7 and Firefox, but for IE6 it don't work and i don't see nothing for the div... Is there anyway i can fix this...
 
MasterMax1313

MasterMax1313

New Member
Messages
84
Reaction score
0
Points
0
try adding

visibility: visible;

(sorry, but i don't have ie6, so i can't test this)
 
P

preetham

New Member
Messages
16
Reaction score
0
Points
0
the border attribute passed is in correct.
try this (added one more attribute to the css - float)
div#comments {
float:left;
position: absolute;
left: 10px;
top: 700px;
width: 700px;
height: 100px;
z-index: 1000;
border: 1px solid #666666;
}
 
L

lordskid

New Member
Messages
41
Reaction score
0
Points
0
try this :
div#comments {
position: absolute;
left: 10px;
top: 700px;
width: 700px;
height: 100px;
z-index: 9;
border: 1px solid;
}

div#hoverabovecomments {
position: absolute;
left: 10px;
top: 700px;
width: 700px;
height: 100px;
z-index: 10;
border: 1px solid;
background:transparent;
}
Click to expand...

I'm not so sure if the z-index of the top div should be greater than the bottom one. make sure none of the two divs you want to overlap has the float:left or float:right attribute set.
Edit:
preetham said:
the border attribute passed is in correct.
try this (added one more attribute to the css - float)
div#comments {
float:left;
position: absolute;
left: 10px;
top: 700px;
width: 700px;
height: 100px;
z-index: 1000;
border: 1px solid #666666;
}
Click to expand...

man if you float objects it will pile to the left or to the right and be as solid as can be... the border attribute is just fine.
 
Last edited:
S

sybregunne

Member
Messages
54
Reaction score
0
Points
6
I don't know if this is what you need...

try this and work from this.
<head>
<style>
div#behind {
position:absolute;
top:20px;
left:20px;
width:100px;
height:100px;
}

div#infront {
position:absolute;
top:25px;
left:25px;
width:90px;
height:90px;
}
</style>
</head>
<body>
<div id="behind">
<p>I am behind another div</p>
</div>
<div id="infront">
<p>I am in front of another div</p>
</div>


</body>
Click to expand...
 
P

preetham

New Member
Messages
16
Reaction score
0
Points
0
lordskid said:
try this :


I'm not so sure if the z-index of the top div should be greater than the bottom one. make sure none of the two divs you want to overlap has the float:left or float:right attribute set.
Edit:


man if you float objects it will pile to the left or to the right and be as solid as can be... the border attribute is just fine.
Click to expand...

If there are multiple divs in layout and the 'comments' div is somewhere in the middle then, applying float will make sure that the other div's beneath or over will not be effected with the position of the current div(as the requirement was to show the div over others with out effecting the layout). Position of the floating div can be set by changing the 'left' and 'top' attributes in css.

#comments{
float:left;
position:absolute;
top:50px;
left:200px;
width:500px;
height:200px;
border:1px solid #dddddd;
background-color:#efefef;
z-index:1000;
}

If you have used z-index for the previous div's(other than the floating div) then u need to specify z-index with greatest value of those which you have used for other div's.
 
Last edited:
S

sybregunne

Member
Messages
54
Reaction score
0
Points
6
but by floating a div to the left doesn't that mean that the div will go to the left side of the browser regardless of its absolute position...

I am not sure as I am just a hobbyist but I always try to use one type of positioning as much as possible.

Then sometimes using a dtd will change the way an html code responds to a css...
Edit:
unless of course your floating div is inside another block element meaning it will float to the left most portion of your block element e.g. another div.

Correct me if I am wrong... please...
 
Last edited:
X

xeross

New Member
Messages
26
Reaction score
0
Points
0
Try making the Z-Index of the one that should be in front higher then the one in the back
 
You must log in or register to reply here.
Top