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

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

尝试:

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