jquery - 如何在按钮元素上显示div内容？

Question

我有一个有特定要求的密码输入字段。当用户单击输入字段时，将显示 div 元素。问题是“提交”按钮显示在 div 中。我想知道 div 如何显示在该按钮上？这是示例:

$("input[type='password']").keyup(checkPsw).focus(function() {
  $(".pswd_info").show();
}).blur(function() {
  $(".pswd_info").hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
  } else {
    $(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
    $(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
  }
}

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
}

.pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

.pswd_info ul {
  margin: 0;
  padding: 0;
}

.pswd_info li {
  list-style: none;
}

.invalid {
  background: url(../images/invalid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #ec3f41;
}

.valid {
  background: url(../images/valid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #3a7d34;
}

.message-submit {
  display: none;
  padding: 5px 15px !important;
  margin: 0px !important;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
    <input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="password"><span class="label label-primary">Password</span></label>
    <input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
    <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
    <div class="panel panel-primary pswd_info">
      <div class="panel-heading">
        <h5>Password requirements:</h5>
      </div>
      <div class="panel-body">
        <ul>
          <li class="invalid letter">At least <strong>one letter</strong></li>
          <li class="invalid capital">At least <strong>one capital letter</strong></li>
          <li class="invalid number">At least <strong>one number</strong></li>
          <li class="invalid character">At least <strong>one special character</strong></li>
          <li class="invalid length">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group required">
    <label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
    <input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

如果您运行代码片段并单击密码输入字段，您将在显示密码要求的 div 内看到“提交”按钮。解决这个问题的最佳方法是什么？

Answer 1

将 z-index 添加到 pswd_info。在我的测试中 z-index:9999 有效。

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index:9999;
}