怎么解决容器1把容器2盖住的问题？_html/css_WEB-ITnose

容器1把容器2盖住了，请帮助！

  <table width="100%" cellpadding="0" cellspacing="0" border="1">            <tr>                <td>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px;                                    left: 0px; top: 0px; background-color: Yellow;">                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                </div>                            </td>                        </tr>                    </table>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                容器2                            </td>                        </tr>                    </table>                </td>            </tr>        </table>

回复讨论(解决方案)

这个跟容器无关，是因为你的div设置了position属性，那么div会脱离文档流
上面两个table的位置都没有变，只是div被显示的位置盖住了

<table width="100%" cellpadding="0" cellspacing="0" border="1">            <tr>                <td>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>sadfas                                <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px;                                    left: 110px; top: 110px; background-color: Yellow;">                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                </div>                            </td>                        </tr>                    </table>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                容器2                            </td>                        </tr>                    </table>                </td>            </tr>        </table>

把上面的红色改一下，你就可以看出区别了

<table width="100%" cellpadding="0" cellspacing="0" border="1">            <tr>                <td>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>sadfas                                <div id="div-datagrid" style="z-index: 0; width: 100%; position: absolute; height: 459px;                                    left: 110px; top: 110px; background-color: Yellow;">                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                </div>                            </td>                        </tr>                    </table>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                容器2                            </td>                        </tr>                    </table>                </td>            </tr>        </table>

在div的前面，加了结果字符，div中的top属性，和left属性更改一下。试试看吧
可以去专门看下css的position属性的知识，会有更好的了解的。

额。。。你把id="div-datagrid"的table设置成了绝对定位，绝对定位的元素就脱离了原本的文档流了，所以后面的table就认为它前面没有table，直接从左上角显示。所以absolute的table就覆盖了第二个table。
可以看看W3CSchool关于绝对定位的说明 http://www.w3school.com.cn/css/css_positioning_absolute.asp

这肯定是你自己练习写的东西吧，如果第一个table硬要absoluted;那么可以设置第一个table的style里z-index改成-1，后面被覆盖的table就显示出来了，不过talble1和talbe2是重叠的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><table width="100%" cellpadding="0" cellspacing="0" border="1">            <tr>                <td>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                <div id="div-datagrid" style=" width: 100%; height: 459px;                                    left: 0px; top: 0px; background-color: Yellow;">                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                    <p>                                        容器1</p>                                </div>                            </td>                        </tr>                    </table>                    <table width="100%" cellpadding="0" cellspacing="0" border="1">                        <tr>                            <td>                                容器2                            </td>                        </tr>                    </table>                </td>            </tr>        </table></body></html> 

把这两个样式去掉就行了z-index: 0;position: absolute;

我要实现列的冻结功能，不能去掉z-index: 0;position: absolute;

有没有更好的办法实现2个表不重叠？

<td style="position: relative;left: 0px; top: 0px;height:459px;">

他的父元素加上这段，不过，父元素需要设置宽和高，保证父元素占的大小，可以完全包裹被定位的元素。

ps：我怎么从代码中，没有看出要列冻结的样子呢？