make these changes in your div's style
z-index:100; some higher value makes sure that this element is above allposition:fixed; this makes sure that even if scrolling is done, div lies on top and always visible
Use the display property in CSS:
<body>
<div id="invisible" style="display:none;">Invisible DIV</div>
<div>Another DIV
<button onclick="document.getElementById('invisible').style.display='block'">
Button
</button>
</div>
</body>
When the the display of the first div is set back to block it will appear and shift the second div down.
It moves table down because there is no much space, try to decrease/increase width of certain elements so that it finds some space and does not push the table down. Also you may want to use absolute positioning to position the div at exactly the place you want, for example:
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
If you want to appear it over something, you also need to give it z-index, so it might look like this:
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
You may add a div with position:absolute within a table/div with position:relative. For example, if you want your overlay div to be shown at the bottom right of the main text div (width and height can be removed):
<div style="position:relative;width:300px;height:300px;background-color:#eef">
<div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
I'm over you!
</div>
Your main text
</div>
See it here: http://jsfiddle.net/bptvt5kb/
z-index only works on absolute or relatively positioned elements. I would use an outer div set to position relative. Set the div on top to position absolute to remove it from the flow of the document.
.wrapper {position:relative;width:500px;}_x000D_
_x000D_
.front {_x000D_
border:3px solid #c00;_x000D_
background-color:#fff;_x000D_
width:300px;_x000D_
position:absolute;_x000D_
z-index:10;_x000D_
top:30px;_x000D_
left:50px;_x000D_
}_x000D_
_x000D_
.behind {background-color:#ccc;}<div class="wrapper">_x000D_
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>_x000D_
<div class="behind">_x000D_
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>aaa</th>_x000D_
<th>bbb</th>_x000D_
<th>ccc</th>_x000D_
<th>ddd</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>111</td>_x000D_
<td>222</td>_x000D_
<td>333</td>_x000D_
<td>444</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>_x000D_
</div> _x000D_
</div> Source: Stackoverflow.com