Html 当我还原web浏览器时，对齐方式正在更改或重叠

当我还原浏览器时，我的html页面div元素被更改，但当我最大化它时，它工作正常。 当我单击密码字段时，会显示一个弹出窗口来验证密码的复杂性，每次它都会在全屏模式下显示在密码字段旁边，但当我在还原模式下单击密码字段时，它会重叠。 我希望它显示在还原模式下的密码字段旁边，以及它在全屏模式下的工作方式。 请帮忙

请在下面找到所附的HTML和CSS代码

var check=function（）{
if（document.getElementById（'psw'）.value==
document.getElementById（'confirmPassword'）。值）{
document.getElementById（'info'）.style.color='green'；
document.getElementById（'info'）.innerHTML='Matching'；
}否则{
document.getElementById（'info'）.style.color='red'；
document.getElementById（'info'）。innerHTML='不匹配'；
}
}
函数myFunction（）{
变量x=document.getElementById（“psw”），y=document.getElementById（“confirmPassword”）；
如果（x.type==“密码”）{
x、 type=“text”；
y、 type=“text”；
}否则{
x、 type=“密码”；
y、 type=“密码”；
}
}
var psw=document.getElementById（“psw”）；
var字母=document.getElementById（“字母”）；
var资本=document.getElementById（“资本”）；
var编号=document.getElementById（“编号”）；
var length=document.getElementById（“长度”）；
var symbol=document.getElementById（“symbol”）；
//当用户单击密码字段时，显示消息框
psw.onfocus=函数（）{
document.getElementById（“message”）.style.display=“block”；
}
//当用户在密码字段外单击时，隐藏消息框
psw.onblur=函数（）{
document.getElementById（“消息”）.style.display=“无”；
}
//当用户开始在密码字段中键入内容时
psw.onkeyup=函数（）{
//验证小写字母
var lowerCaseLetters=/[a-z]/g；
if（psw.value.match（小写字母））{
信函。类列表。删除（“无效”）；
信函。类别列表。添加（“有效”）；
}否则{
信函。类别列表。删除（“有效”）；
字母.classList.add（“无效”）；
}
//验证大写字母
var大写字母=/[A-Z]/g；
if（psw.value.match（大写字母））{
大写.classList.remove（“无效”）；
大写.classList.add（“有效”）；
}否则{
大写.classList.remove（“有效”）；
大写.classList.add（“无效”）；
}
//验证数字
变量数=/[0-9]/g；
如果（psw.value.match（数字））{
number.classList.remove（“无效”）；
number.classList.add（“有效”）；
}否则{
number.classList.remove（“有效”）；
number.classList.add（“无效”）；
}
//验证长度
如果（psw.value.length>=8）{
length.classList.remove（“无效”）；
length.classList.add（“有效”）；
}否则{
length.classList.remove（“有效”）；
length.classList.add（“无效”）；
}
//验证符号
变量符号=/[-！$%^&*（）+| ~=`{}[：；？，.@\]/g；
如果（psw.value.match（符号））{
symbol.classList.remove（“无效”）；
symbol.classList.add（“有效”）；
}否则{
symbol.classList.remove（“有效”）；
symbol.classList.add（“无效”）；
}
}

/*设置所有输入字段的样式*/
输入{
宽度：25%；
填充：12px；
边框：1px实心#ccc；
边界半径：8px；
框大小：边框框；
边缘顶部：6px；
边缘底部：6px；
}
#我的表格选择
{ 
宽度：25%；
填充：12px；
边框：1px实心#ccc；
边界半径：8px；
框大小：边框框；
边缘顶部：6px；
边缘底部：16px；
}
/*设置提交按钮的样式*/
输入[类型=提交]{
背景色：#4CAF50；
颜色：白色；
}
/*为输入设置容器的样式*/
.集装箱{
背景色：#f1f1；
填充：20px；
}
/*当用户单击密码字段时，将显示消息框*/
#信息{
显示：无；
浮动：左；
背景：透明；
颜色：#000；
位置：绝对位置；
右：0；
填充：-2000px；
利润上限：-120px；
右边距：200px；
}
#信息p{
填充：1px35px；
字体大小：14px；
}
/*当要求正确时，添加绿色文本颜色和复选标记*/
.有效{
颜色：绿色；
}
.有效期：之前{
位置：相对位置；
左：-35px；
内容：“✔";
}
/*当要求错误时，添加红色文本颜色和“x”*/
.无效{
颜色：红色；
}
.无效：之前{
位置：相对位置；
左：-35px；
内容：“？”；
}

密码更改
更改unix用户的密码
选择用户名

测试1
测试2


密码必须包含以下内容：
小写字母
大写字母
一个数字

至少8个字符
符号


显示密码

请修改您的css代码

css

#message {
  display:none;
  width: 25%;
}

@media only screen and (max-width: 1280px) {
    #message {
        position: relative;
        float: none;
        margin: 0;
        width: 25%;
    }
}

HTML

<div class="container">
  <form>
    <div id=myForm align = "center">
    <label for="usrname">Select Username</label><br>
    <select name="Users">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    </select>
    </div>
    <div align= "center">
    <input type="password" id="psw" name="psw" onkeyup='check();' placeholder="New Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*_=+-]).{8,}" title="Must contain at least one number, one symbol and one uppercase and lowercase letter, and at least 8 or more characters" required>
    <br>
    <input type="password" id="confirmPassword" name="confirmPassword" onkeyup='check();' placeholder="Re-type Password" title="Confirm new password" required>
    <br>
    <div id="message" align = "left">
        <h4>Password must contain the following:</h4>
        <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
        <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
        <p id="number" class="invalid">A <b>number</b></p>
        <p id="length" class="invalid">Minimum <b>8 characters</b></p>
        <p id="symbol" class="invalid">A <b>symbol</b></p>
    </div>
    <span id='info'></span>

    <input type="checkbox" onclick="myFunction()" style="width: 40px;">Show Password
    </div>
    <div align = "center">
    <input type="submit" id="submit" value="Change Password">
    </div>
  </form>
</div>

选择用户名

测试1
测试2




密码必须包含以下内容：
小写字母
大写字母

#message {
 width: 25%;
}

psw.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
  document.getElementById("message").style.display = "none";
}

psw.onfocus = function() {
  $('#message').slideDown();
}

// When the user clicks outside of the password field, hide the message box
psw.onblur = function() {
  $('#message').slideUp();
}

@media only screen and (max-width: 1280px) {
    #message {
        position: relative;
        float: none;
        margin: 0;
        width: 25%;
    }
}