響應式HTML / CSS在表單下發送文本

Question

我正在創建一個響應式登錄頁面。 我在表中的文本部分為用戶登錄之前提供了一些快速信息。問題是，當屏幕/窗口大小變小時，登錄表單會覆蓋/覆蓋文本。 當屏幕縮小時，我希望文本在登錄表單下方移動，但是我不確定如何執行此操作。 我可以在頂部獲得徽標圖像，並可以使用“最大寬度” CSS屬性在頂部的鏈接菜單中響應大小更改，但無法弄清楚如何將某些內容移動到頁面的另一部分。 我正在使用的HTML / CSS粘貼在下面，我還附上了手機屏幕截圖，顯示了重疊問題。 我知道HTML / CSS並不理想，但是我必須在非常有限的編輯器中執行此操作。 任何幫助深表感謝。

<p><img src="https://www.westga.edu/uwgonline/assets-uwgonline/pics/CourseDen.png" style="z-index: -1; margin: 0% 1.5%; max-width: 1100px; width: 90%; position: absolute; height: auto;" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table style="z-index: -1; opacity: 0.85; max-width: 100%; width: 50%; left: 35%; top: 380px; position: absolute;">
    <tbody>
        <tr>
            <td style="padding: 20px; background: #FFFFFF;">
                <p>
                    <span style="color: #000000;">
                    <span style="color: #000000;">
                        <em>Please note your password is the same as your <strong>UWG ID</strong> and is case sensitive.</em>
                    </span>
                    </span>
                </p>
                <strong><span style="color: #000000;">UWG Online Help Desk</span></strong>
                <br />
                <span style="color: #000000;">(M-F 8a-5p ET) 678-839-6248 or 1-855-933-8946</span>
                <br /><a href="mailto:online@westga.edu">online@westga.edu</a> &bull; <a rel="noopener noreferrer" href="http://uwgonline.westga.edu/uwgonline/chat-with-us.php" target="_blank">Chat</a>
                <p><strong><span style="color: #000000;">24/7/365 D2L Help Center</span></strong>
                    <br /><span style="color: #000000;">Knowledge Base &amp; Live Support</span>
                    <br /><a rel="noopener noreferrer" href="https://D2Lhelp.view.usg.edu" target="_blank">https://D2Lhelp.view.usg.edu</a></p>
            </td>
        </tr>
    </tbody>
</table>
<hr />
<table style="max-width: 100%; width: 99%; text-align: center; border: none; border-collapse: collapse;">
    <tbody>
        <tr>
            <td style="width: 20%;"><a href="https://uwgonline.westga.edu/uwg-online-contact-us.php" target="blank" style="color: #777777;">Help</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://uwgonline.westga.edu/uwg-online-student-help.php" target="blank" style="color: #777777;"> Resources </a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="http://uwgonline.westga.edu/" target="blank" style="color: #777777;"> More Info</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://westga.view.usg.edu/d2l/systemCheck" target="blank" style="color: #777777;"> System Checker</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://go.view.usg.edu/" target="blank" style="color: #777777;"> eCampus, WebMBA, &amp; EU</a></td>
        </tr>
    </tbody>
</table>
<hr />

Answer 1

我的問題的答案是，將卡在登錄框后面的文本移開並刪除其position: absolute 。 這會將登錄框置於其下方。 我們真正想要的是文本左側的登錄框，僅當屏幕/窗口小於一定大小時才向下移動至其下方，但是由於我無法編輯登錄框，因此我們決定采用這種解決方案成為我們可以編輯的最佳內容。 @Sirence提到的position: absolute您評論中的position: absolute信息！