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

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by Shark3y3s, May 13, 2008.

  1. Shark3y3s

    Shark3y3s New 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...
  2. MasterMax1313

    MasterMax1313 New Member

    try adding

    visibility: visible;

    (sorry, but i don't have ie6, so i can't test this)
  3. preetham

    preetham New 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;
    }
  4. lordskid

    lordskid New 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.
    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.
    Last edited: May 15, 2008
  5. sybregunne

    sybregunne Member

    I don't know if this is what you need...

    try this and work from this.
  6. preetham

    preetham New 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: May 15, 2008
  7. sybregunne

    sybregunne 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: May 31, 2008
  8. xeross

    xeross New Member

    Try making the Z-Index of the one that should be in front higher then the one in the back

Share This Page