how can i fixed top my cross button ? help me please !
<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>see , my cross button is not fix . how can i fix my cross button . i know only navbar can be fixed .
.btn-blue-cross{
position:fixed;
}
it will working but when i am doing my screen small like as mobile version , then button will hide . how can i solve this problem ?
Try:
.btn-blue-cross{
position:fixed;
top: 0;
z-index: 10;
}