Question

假设我有一个表单，当用户单击时我希望另一个div（带有加载微调器）出现在表单的顶部，因此表单仍然可见，但加载微调器将位于表单的顶部：

<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>
    <a href="#">I forgot my password</a><br>
</div>
<div id="loader" style="background: green;opacity: 0.5;filter: alpha(opacity=50); /* For IE8 and earlier */"></div>

我怎样才能做到这一点？

Answer 1

你<div id="form">中的

将以下内容作为第一个元素

<div style="position:absolute; width:inherit; height:inherit;">loading...</div>

Answer 2

您可以使用position: absolute或position: fixed来实现这一目标。

绝对定位将根据您的top，left，bottom和right值定位元素，并将其从文本流中取出。这可能是你选择的方法。

固定定位也会这样做，除了div然后相对于浏览器窗口定位并且无论如何都将保持在这个位置，所以即使在页面上滚动，div也会保持固定在这个位置而不是滚动页面的其余部分。

Answer 3

你可以使用伪元素：after，使其位置绝对，并给它的高度和宽度100％以及0的顶部和右侧。

像这样：

#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
    }

如何使两个div完全相互重叠

3 个答案: