Css Ajax加载图片位置高于内容

我使用这里的Ajax加载图片：当Ajax处于开始、完成和成功状态之间时，显示图像加载

我想知道如何使图像出现在所有内容之上，并像几乎所有网站中加载的图片一样出现在屏幕中央

<div id="ajaxloader" style="display: none;">
<h:graphicImage value="/resources/img/gload.gif"></h:graphicImage>
</div>

Ajax脚本

<script>
    jsf.ajax.addOnEvent(function(data) {
        var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
        var ajaxloader = document.getElementById("ajaxloader");

        switch (ajaxstatus) {
            case "begin": // This is called right before ajax request is been sent.
                ajaxloader.style.display = 'block';
                break;

            case "complete": // This is called right after ajax response is received.
                ajaxloader.style.display = 'none';
                break;

            case "success": // This is called when ajax response is successfully processed.
                // NOOP.
                break;
        }
    });
</script>

addOnEvent（函数（数据）{
var ajaxstatus=data.status；//可以是“开始”、“完成”和“成功”
var ajaxloader=document.getElementById（“ajaxloader”）；
开关（AJAX状态）{
case“begin”：//这是在发送ajax请求之前调用的。
ajaxloader.style.display='block'；
打破
case“complete”：//在收到ajax响应后立即调用。
ajaxloader.style.display='none'；
打破
案例“success”：//在成功处理ajax响应时调用此函数。
//努普。
打破
}
});

尝试结合使用

位置：固定

和

变换：翻译

。我不知道什么是

h:graphicImage

，因此下面的示例使用了标准的

img

标记，但重要的是

ajaxloader

div上的内联样式：

var ajaxloader=document.getElementById（“ajaxloader”）；
var i=0；
函数toggleLoader（）{
var显示风格；
如果（++i%2）{
displayStyle='block'；
}否则{
displayStyle='none'；
}
ajaxloader.style.display=displayStyle；
}
document.getElementById（“showLoader”）.addEventListener（“单击”，切换Loader）

切换加载图形
谢谢，居中正在工作，但图像显示在其他分区的支持答案下，以添加一个
z索引
；你需要确保它足够高以供你使用。如果这仍然不起作用，您需要确保加载div是
body
的子对象，以确保不会陷入意外的堆栈上下文中。是的，现在所有操作都与预期的一样，顺便说一句，h:graphicImage是Java服务器面的img标记