コンテナ 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 はドキュメント フローから切り離されます
2 つのテーブルの位置上は変更されていませんが、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>
うーん。 。 。 id="div-datagrid"のテーブルを絶対配置にすると、絶対配置された要素が元のドキュメントフローから切り離されるため、後続のテーブルはその前にテーブルがないとみなして直接表示されてしまいます。左上隅から。したがって、絶対テーブルは 2 番目のテーブルをカバーします。
絶対配置に関する W3CSchool の説明を参照してください。 http://www.w3school.com.cn/css/css_positioning_absolute.asp
最初のテーブルが絶対配置を要求する場合は、これを自分で書く練習をする必要があります。最初のテーブルのスタイルの z-index を -1 に設定すると、後で説明するテーブルが表示されますが、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;
2 つのテーブルが重複しないようにするより良い方法はありますか?
<td style="position: relative;left: 0px; top: 0px;height:459px;">