html - 制作一个覆盖 div 填充整个有溢出的容器

Question

我想在容器内显示一个加载程序。我正在尝试在容器内显示覆盖 div。

如果我使用绝对位置，叠加层也会位于顶部。

这是 Fddle:http://jsfiddle.net/vaykmry4/5/

代码:

<style>
.container
{
    margin: 25%;
    position:relative;
    width:200px;
    height:200px;
    border:3px solid #ddd;
    overflow:auto;
}

.overlay {
    width:100%;
    height:100%;
    margin:auto;
    left:0;
    top:0;
    position:absolute;
    background:#fff;
    opacity:.8;
    text-align:center;

}

.loader {
display:inline-block;
}

</style>

<div class="container">
    <div class="overlay">
      <span class="loader">
        loading...
      </span>
    </div>
    <div class="content">Here is content ... <div>
</div>

谢谢。

Answer 1

首先我应该注意到 fixed 元素是相对于 initial containing block 定位的 是为 html 元素建立的。

因此，您应该使用绝对 定位来相对于最近的 containing block 定位叠加层。 由容器建立。

.container {
    position: relative;
    overflow: auto;
}

.overlay { position: absolute; }

其次，它将一直工作到内容开始增长为止。当内容高度大于叠加层时，叠加层将不再填满容器的整个空间。

由于您可能会使用 JavaScript 来显示叠加层(包括加载等)，因此一种解决方案是将 overflow: hidden; 添加到容器中以防止滚动。

最后，根据垂直滚动条的位置设置.overlay元素的top属性。

这是上述方法的 jQuery 版本:

var $container = $(".container");

$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");

EXAMPLE HERE