jquery - 在文本框上方或下方对齐弹出通知 (CSS/jQuery)

Question

我在这里有一个密码重置页面，每当用户在带有 class 的“新密码”文本框中键入时，都会弹出一个 jquery 弹出窗口id="pswd_info"。

问题是弹出窗口覆盖了文本框。现在我将它固定在页面底部，没有任何其他解决方案。当浏览器尺寸缩小时，这并不好，如下所示：

我应该探索哪些技术来将弹出窗口或“新密码”文本框向上移动？

Answer 1

您正在使用这个 css：

right: 360px;

这个位置从页面的右端弹出 360 像素。这将是一个问题，因为大多数用户有不同的屏幕宽度。（尝试调整浏览器窗口的大小）

要使用更通用的居中方法，请使用：

right:50%;
margin-right:-125px;

这会将它定位在中间。margin-right 是弹出窗口全宽的一半，以补偿元素自身的宽度。

你的底部属性也会有同样的问题，因此我建议使用顶部而不是底部。（加上你有 2 个不同的底部属性，一个是有缺陷的）

Answer 2

我会将弹出窗口移动到与密码输入字段相同的 li 元素中：

<li style="position: relative;">
    <label for="pswd">New Password:</label>
    <span>
        <input id="MainContent_pswd" type="password" autocomplete="off" name="ctl00$MainContent$pswd">
    </span>
    <div id="pswd_info">place your password info box content here...</div>
</li>

但是您必须在 li 元素处设置“位置：相对”（通过类或如上例所示）

至少您必须设置“底部：（您到下一个相对父级的底部距离）px；” 财产 ：）