Question

我正在使用twitter bootstrap，我想创建一个叠加来显示加载叠加层。例如，面板主体或井身将填充并居中文本“加载”或图像。

我在这里创建了一个jsfiddle应用程序。

<div class="col-md-5">
    <div class="panel panel-info">
        <div class="panel-heading">
            Header
        </div>
        <div class="panel-body">
            Body
            <div class="loading-overlay">Loading</div>
        </div>
    </div>    
</div>

<div class="well">
    Well Body
    <div class="loading-overlay">Loading</div>
</div>

.loading-overlay{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    background-color:rgba(0, 0, 0, 0.65);
    color: white;
}

Bu叠加填充所有页面。但我希望它只会填充 well 元素或面板主体。或者如果我把它放在任何其他元素上。

示例code is here。

Answer 1

您要在此处执行的操作是将容器元素设置为相对位置。

在这种情况下，既然.panel-body和.well都应该包含覆盖图，那么你需要做的就是添加以下规则：

.panel-body {
    position: relative;
}

.well {
    position: relative;
}

这里是小提琴：http://jsfiddle.net/3er5qjgt/

Answer 2

那是因为：

top:0;
left:0;
right:0;
bottom:0;
position:absolute;

转化为：在页面上占据所有可能的位置。

您可以将位置更改为relative，或更改处理方式。

Answer 3

相对于父容器添加类，以显示每个部分的加载叠加。

.panel-body, .well{
    position:relative;
}

这是小提琴：http://jsfiddle.net/0r7ytrk1/5/

Answer 4

让您的父母亲戚：

.well, .panel-body {
    position: relative;
}

JSFiddle Demo

CSS按元素覆盖为相对

4 个答案: