使用居中元素覆盖整个页面的 HTML-CSS 覆盖

Question

我想创建一个简单的全屏覆盖，中间有加载器和文本。我对文本有一些问题。我希望图像在 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

试试这个，

 .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 :)

Answer 3

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

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

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

否则，如果您对此有控制权，则只需替换 DOM 中元素的顺序即可。如果在 DOM 树中，兄弟姐妹出现在其他兄弟姐妹之后，则它们将出现在其他兄弟姐妹之上如spec 中所述：

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

1. 构成 stackingcontext 的元素的背景和边框。
2. 具有负堆栈级别（最负优先）的子堆栈上下文。
3. 流入、非内联级别、非定位的后代。
4. 未定位的浮动。
5. 流入、内联级、非定位后代，包括内联表和内联块。
6. 堆栈级别为 0 且定位的子堆栈上下文 堆栈级别为 0 的后代。
7. 具有正堆栈级别的子堆栈上下文（最不正的优先）。

所以您可以将标记更改为：

<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/