Why does this DIV move HTML content down ?

Question

I have a DIV which I want to insert into my HTML content. Whenever I do, the content moves down from where the DIV WOULD have appeared in the content. It moves down the height of the div. I sat 'WOULD have appeared' because its position is set to relative.

Here is some code: (THE DIV I MEAN IS THE ONE WITH ID="pop"

<table border="0" align="center">
  <tr>
    <td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div>
<div class="nav_container" id="nav_container">
   <div id="nav_container2" style="position: relative; left: 0%; top: 13%;">
       HERE IS ALL THE CONTENT

and some css:

nav_container{
width:720px;
height:180px;
background-image:blablabla;
}

If you need more input tell me and I will update this Q.

The content moves down although I can actually position the div ('pop') where I want, But I dont want the content moved down. I mean, everything looks good, except content is ALL moved down 52px.

Thanks

Answer 1

What you describe is the intended behaviour of position: relative.

I'm not sure about what you want to achieve but try putting a wrapper outside pop with position: relative and give pop position: absolute. That should make you able to move pop without moving the rest of the content.

If you use only position: absolute the positioning will be relative to the viewport's top left corner and not the table's which probably is not what you want.

Answer 2

You will have to set the position to 'absolute' to get the ability to place the div wherever you want (and also the ability to use z-indexes).

Answer 3

Try to add below css or try to decrease top size you have specified for the div eg top:100px

  <style type="text/css">
    #pop
    {
       display:inline;
    }
  </style>

Answer 4

If I understand correctly you want DIV to appear on top of the rest of the content, being completely independent of the rest of your site. To do that you need to set position: absolute rather than position: relative. relative basically allows moving element from its original position, but the space that element was occupying is still there and that's why all the content moved down in your case.

If you apply position: absolute element will be taken out of the flow of the page and the following elements shouldn't move down. But then you might need to make sure that DIV#pop moves in correct context but that's something to worry about later ;)

Hope my explanation makes sense, but you also might find this this link useful