How to make two divs completly overlap each other - html

Question

Let's say I have a form, when user clicks I want another div (with a loading spinner) to appear on top of the form, so the form would still be visible but the loading spinner would be on top of the form:
<div id="form">
<p class="login-box-msg">Sign in to start your session</p>
<form action="javascript:void(0)" method="post" ng-controller="loginCtrl">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email" required ng-model="email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" required ng-model="password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<input type="button" class="btn btn-primary btn-block btn-flat" ng-click="signIn()" value="Sign In" />
</div>
<!-- /.col -->
</div>
</form>
I forgot my password<br>
</div>
<div id="loader" style="background: green;opacity: 0.5;filter: alpha(opacity=50); /* For IE8 and earlier */"></div>
How can I achieve this?

Answer 1

in your <div id="form">
put the following as first element
<div style="position:absolute; width:inherit; height:inherit;">loading...</div>

Answer 2

You can achieve this with position: absolute or position: fixed.
Absolute positioning will position the element according to your top, left, bottom and right values and take it out of the text flow. This will probably be your method of choice here.
Fixed positioning will do the same, except that the div is then positioned relative to the browser window and will stay in this position no matter what, so even when scrolling on the page, the div will stay fixed on this position and not scroll with the rest of the page.

Answer 3

You can do this by using the pseudo element :after,
make it position absolute and give it height and width of 100%
and top and right of 0.
like this:
#form {
position: relative;
}
#form:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #abc123; // put ur spinner here
z-index: 2; // make sure it is on top
}