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

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