Question

我想在中心创建一个带有加载程序和文本的简单全屏叠加层。我的文字有些问题。我希望图像 ~~over~~ ABOVE 文本。你能帮我解决这个问题吗？

<div id="loadingOverlay" class="loader-overlay">
    <div class="loader-content loader-center">
        <img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center" alt=""/>
        <div class="loader-center loader-text">Loading, please wait...</div>
    </div>
</div>

http://jsfiddle.net/bLz7wgvs/2/

[编辑]
对不起我的英语不好。我的意思是“在......之上”，而不是“在......之下......”

应该看起来像：

                               [-------------loader here-------------]
           Loader text (plz wait, etc.) in one line, both centered horizontally and vertically

Answer 1

修改

我不知道你想让图像出现在文字上方。我已经更改了您的代码：http://jsfiddle.net/bLz7wgvs/7/

<强> CSS：

.loader-overlay { -ms-opacity: 0.9; background: #444; display: block; height: 100%; left: 0; opacity: 0.9; position: fixed; top: 0; vertical-align: middle; width: 100%; z-index: 100000; } .loader-content { margin-left: auto; margin-top: auto; width: 50%; } .loader-center { -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); left: 50%; display: block; position: fixed; top: 50%; transform: translate(-50%, -55%); } .loader-text { color: #FFF; font-size: 18px; height: 50%; }

Answer 2

您只需要向图像添加z-index（以及HTML元素所需的关联类）：

.loader-img {
    z-index: 10;
}

http://jsfiddle.net/bLz7wgvs/4/

否则，如果您可以控制它，则可以直接替换DOM中元素的顺序。兄弟姐妹将出现在其他兄弟姐妹之上，如果他们出现在DOM树之后，如spec中所述：

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


构成stackcontext的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

因此您只需将标记更改为：

<div id="loadingOverlay" class="loader-overlay">
    <div class="loader-content loader-center">
        <div class="loader-center loader-text">Loading, please wait...</div>
        <img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center loader-img" alt=""/>
    </div>
</div>

http://jsfiddle.net/bLz7wgvs/6/

Answer 3

试试这个，

 .loader-overlay {
        -ms-opacity: 0.9;
        background: #444;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0.9;
        position: fixed;
        top: 0;
        vertical-align: middle;
        width: 100%;
        z-index: 100000;
    }

    .loader-content {
        height: auto;
        margin-left: auto;
        margin-top: auto;
        width: auto;
    }

    .loader-center {
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        left: 50%;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
    z-index:1;
    }

    .loader-text {
        color: #FFF;
        font-size: 18px;
    z-index: 1;
    }

我已将z-index添加到图像和加载器文本中：）

覆盖整个页面的HTML-CSS叠加层，其中心元素为

3 个答案: