响应 HTML/CSS 在表单下方发送文本

Question

我正在创建响应式登录页面。我在 table 中有一段文本，以便在用户登录之前为用户提供一些快速信息。问题是，当 screen/window 大小变小时，登录表单 overlaps/covers文本。当屏幕缩小时，我希望文本向下移动到登录表单下方，但我不确定该怎么做。我能够使用 "max-width" CSS 属性获得顶部的徽标图像和链接菜单以响应大小变化，但无法弄清楚如何将某些内容移动到页面的另一部分。我正在使用的 HTML/CSS 粘贴在下面，我附上了我的 phone 的屏幕截图，显示了重叠问题。我知道 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。这将登录框放在它下面。我们真正想要的是文本左侧的登录框，只有当 screen/window 小于一定大小时才向下移动到它下面，但是因为我无法编辑登录框，所以这是我们决定的解决方案将是我们有权编辑的最好的。你@Sirence 在你的评论中提到了 position: absolute 信息！

响应 HTML/CSS 在表单下方发送文本

Responsive HTML/CSS to Send Text Below Form

html

css

html-table

responsive

overlap