Table overlapping div

Question

I want to place a table at the bottom of the page but as soon as you resize the window/browser it overlaps the content above it. When I put a table on the top of the page it does not overlap.

Any suggestions?

<div id="box">minimize/resize the window and the table will overlap my div...</div>
<table id="tables" border="0" bgcolor="silver">
  <tr>
   <td>My table</td>
  </tr>


#box {
    position: absolute;
    top:20px;
    width:200px;
    height:200px;
    border: 1px solid black;
}

#tables {
    position: absolute;
    width: 100%;
    bottom: 0%;
    height: 30%;
}

Here is my Fiddle

Answer 1

Natural Z position in HTML (Document order of apperance for positioned elements):

<div>     >>> lower Z index 
<table>   >>> higher Z Index therefore overlaps DIV

logically:

<table>
</div>    >>> DIV will now overlap Table

Manually control the z-index property: demo

<div>     >>> z-index:1; >>> DIV will now overlap Table
<table>   >>> Lower Z index