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

【问题标题】：Responsive HTML/CSS to Send Text Below Form响应式 HTML/CSS 在表单下方发送文本
【发布时间】：2018-12-11 21:17:43
【问题描述】：

我正在创建一个响应式登录页面。我在表格中有一段文本，以便在用户登录之前为用户提供一些快速信息。问题是当屏幕/窗口尺寸变小时，登录表单会重叠/覆盖文本。当屏幕缩小时，我希望文本向下移动到登录表单下方，但我不确定该怎么做。我能够使用“最大宽度”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 />

【问题讨论】：

我不太了解前端的东西，但每当我觉得需要响应式布局时，我更喜欢 Bootstrap。
问题是我必须在我们的组织内设计这个学习管理系统（D2L 的 BrightSpace）。我唯一拥有的是一个文本编辑器，它就像一个非常有限的所见即所得编辑器，可以直接查看和编辑 HTML。我没有选择以“正确”的方式构建它。如果我这样做了，我想我可以弄明白，但要让它以这种有限的方式工作是困难的（至少可以这么说）。
我无法使用您的代码查看登录部分。请发布工作fiddle。
不幸的是，登录部分是由 LMS 自动添加的，在预览/发布更改之前我无法查看或编辑。我正在尝试从浏览器的开发人员/检查员控制台获取信息，但它并不像我希望的那样容易。
似乎登录窗口是绝对定位的。您可以为小屏幕添加媒体查询，并覆盖登录表单的位置（如果您知道它是类或 id）以将其添加回 dom。您可以在普通浏览器中访问呈现的站点吗？

标签： html css html-table responsive overlap

【解决方案1】：

我的问题的答案是获取卡在登录框后面的文本并将其删除为position: absolute。这将登录框放在它下面。我们真正想要的是文本左侧的登录框，并且仅当屏幕/窗口小于一定大小时才向下移动，但由于我无法编辑登录框，这是我们决定的解决方案成为我们有权编辑的最佳人选。您@Sirence 在您的评论中提到了position: absolute 信息！

【讨论】：