在文本框上方或下方对齐弹出通知（CSS / jQuery）

Question

我有一个密码重置页面here，只要用户输入类id="pswd_info"的“新密码”文本框，就会弹出一个jquery弹出窗口。

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

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

Answer 1

您正在使用此css：

right: 360px;

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

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

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

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

你的底层属性会遇到同样的问题，因此我建议使用top而不是bottom。 （加上你有两种不同的底部属性，一种是有缺陷的）

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元素中设置“position：relative”（通过类，或者如上例所示）

至少你必须设置“底部:(你到下一个亲戚的底部距离）px;”财产：）