LinkBack URL
About LinkBacks
Reply With Quotetry adding
visibility: visible;
(sorry, but i don't have ie6, so i can't test this)
x10Hosting Member
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...
x10Hosting Member
try adding
visibility: visible;
(sorry, but i don't have ie6, so i can't test this)
If you found this helpful, don't be afraid to add to my rep
____________________________
There are only 10 types of people in this world...
Those who understand binary,
And those who don't
x10Hosting Member
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;
}
x10Hosting Member
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.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;
}
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.Originally Posted by preetham
Last edited by lordskid; 05-15-2008 at 02:42 AM. Reason: Automerged Doublepost
x10Hosting Member
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>
x10Hosting Member
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 by preetham; 05-15-2008 at 09:05 PM.
x10Hosting Member
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 by sybregunne; 05-31-2008 at 02:41 AM. Reason: Automerged Doublepost
x10Hosting Member
Try making the Z-Index of the one that should be in front higher then the one in the back
Posting Permissions
