固定顶部我的表格十字按钮

Question

如何固定十字按钮的顶部？请帮帮我！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid user-information" id="registerid">
                    <button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="animatable bounceIn">
                            <div class="col-md-4">
                                <form class="form-horizontal error" novalidate="">
                                    <div class="control-group error">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                                            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="control-group error">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
                                            <input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...@gmail.com">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="control-group error">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class=" control-group error">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
                                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="control-group">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
                                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="control-group">
                                        <button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
                                        <div class="input-group">
                                            <input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true"> I agree to the <a href="#">terms and conditions</a>
                                            <p class="help-block" style="display:none;"></p>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </div>

看，我的十字按钮没有修复。我该如何修复我的十字按钮。我知道只能修复导航栏。

.btn-blue-cross{
    position:fixed;
}

它会工作，但是当我像移动版一样将我的屏幕缩小时，按钮会隐藏。我该如何解决这个问题？

Answer 1

在 css 按钮中添加以下代码，您希望在滚动时将其固定在顶部。

.btn-blue-cross{ 
position: fixed; 
top: 10px; 
right: 10px; 
}

让我知道它是否有效以及这是否是您想要的

Answer 2

尝试：

.btn-blue-cross{
    position:fixed;
    top: 0;
    z-index: 10;
}

Answer 3

如果您只想让您的按钮保持可见，请更改您的 HTML 结构以将其放在一列中，然后使用表单的偏移量来解决它。如果您不希望它随页面滚动，请将 css 中的 btn 从 fixed 更改为 absolute。

查看工作代码段。

.btn-blue-cross {
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid user-information" id="registerid">
  <div class="row">
    <div class="col-xs-2 col-md-1">
      <button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
    </div>
    <div class="animatable bounceIn">
      <div class="col-xs-10 col-md-4 col-md-offset-3">
        <form class="form-horizontal error" novalidate="">
          <div class="control-group error">
            <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
              <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
            </div>
            <p class="help-block"></p>
          </div>
          <div class="control-group error">
            <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
              <input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...@gmail.com">
            </div>
            <p class="help-block"></p>
          </div>
          <div class="control-group error">
            <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
              <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
            </div>
            <p class="help-block"></p>
          </div>
          <div class=" control-group error">
            <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
              <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
            </div>
            <p class="help-block"></p>
          </div>
          <div class="control-group">
            <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
              <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
            </div>
            <p class="help-block"></p>
          </div>
          <div class="control-group">
            <button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
            <div class="input-group">
              <input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true">I agree to the <a href="#">terms and conditions</a>

              <p class="help-block" style="display:none;"></p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 4

css 将是：

.btn-blue-cross{
    position:fixed;
    top: 0;
    z-index: 10;
}

固定顶部我的表格十字按钮

fixed top my cross button of form

html

css

twitter-bootstrap

css-position

fixed