表重叠div

Question

我想在页面底部放置一个表格，但只要您调整窗口/浏览器的大小，它就会覆盖它上面的内容。当我把一张桌子放在页面顶部时，它不会重叠。

有什么建议？

<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

HTML中的自然Z位置（positioned元素的外观的文档顺序）：

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

逻辑：

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

手动控制z-index财产：demo

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

Answer 2

请在CSS中更新以下代码;

#box {
position: ;
top:20px;
width: 100%;
height:200px;
border: 1px solid black;
max-width:250px; /* or whatever width you want. */
display: inline-block;
}

在这里，将width width属性设置为100％，max-width属性控制文本在调整窗口/浏览器大小时不会与内容重叠。