ホームページ > ウェブフロントエンド > htmlチュートリアル > コンテナ 1 がコンテナ 2 を覆う問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose

コンテナ 1 がコンテナ 2 を覆う問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:20:35
オリジナル
1048 人が閲覧しました

コンテナ 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>
ログイン後にコピー
ログイン後にコピー


div の前に、結果文字、先頭の属性を追加しますdiv を開き、 left 属性を変更します。ぜひ試してみてください
CSS のposition 属性について詳しく学ぶと、より深く理解できるようになります。

うーん。 。 。 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> 
ログイン後にコピー

これら 2 つのスタイル z-index: 0;position: を削除するだけです。 Absolute;

列の固定機能を実装したいのですが、z-index を削除できません: 0;position: ABSOLUTE;

2 つのテーブルが重複しないようにするより良い方法はありますか?

<td style="position: relative;left: 0px; top: 0px;height:459px;">
ログイン後にコピー


この段落を親要素に追加します。ただし、親要素が、配置された要素を完全に囲むことができるサイズを占めるように、親要素で幅と高さを設定する必要があります。

ps: 列を固定する必要があることがコードからわからないのはなぜですか?

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート