How to solve the problem of container 1 covering container 2? _html/css_WEB-ITnose

Container 1 covers container 2, please help!

  <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>

Reply to the discussion (solution)

This has nothing to do with the container. It is because your div has the position attribute set, so the div will be separated from the document. Flow
The positions of the two tables above have not changed, but the div is covered by the displayed position

<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>

Change the red color above, you can see The difference is

<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>

In front of the div, the result character is added, the top attribute in the div, and the left attribute are changed. Give it a try
You can learn more about the position attribute of CSS and you will have a better understanding.

Uh-huh. . . If you set the table with id="div-datagrid" to absolute positioning, the absolutely positioned element will be separated from the original document flow, so the subsequent table will think that there is no table in front of it and will be displayed directly from the upper left corner. So the absolute table covers the second table.
You can take a look at W3CSchool’s instructions on absolute positioning http://www.w3school.com.cn/css/css_positioning_absolute.asp

This must be something you practice writing by yourself. If the first The table insists on being absolute; then you can set the z-index in the style of the first table to -1, and the tables that are covered later will be displayed, but talble1 and talbe2 overlap

<!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> 

Just remove these two styles. z-index: 0; position: absolute;

I want to implement the freezing function of columns. I cannot remove z-index: 0; position: absolute;

Is there a better way to prevent the two tables from overlapping?

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

Add this paragraph to its parent element. However, the parent element needs to set the width and height to ensure that the parent element occupies a size that can completely wrap the positioned element.

ps: Why don’t I see from the code that the column should be frozen?