如何创建显示在所有元素（含模态框）最上层的Ajax加载Div？

嘿，这个问题很常见——就是**堆叠上下文（stacking context）**在搞鬼！你的加载层z-index:11数值肯定比模态框的z-index小，所以才会被压在下面。我给你几个关键的解决步骤：

1. 先确认模态框的z-index值 #

打开浏览器开发者工具（按F12），选中你的模态框元素，查看它的z-index具体是多少。比如很多UI框架（像Bootstrap）的模态框默认z-index是1050，你只需要把加载层的z-index设得比这个数大就行。

2. 修改加载层的CSS #

把加载层的z-index调到足够高，同时确保没有父元素限制它的层级。修改后的代码如下：

/** loader */
#div_loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051; /* 比模态框的z-index大1就足够 */
    background-color: #FFF;
    min-height: 100%;
    width: 100%;
    height: auto;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120px;
    display: none;
    pointer-events: auto; /* 可选：阻止用户点击加载层下方的元素 */
}

3. 排查父元素的堆叠限制 #

如果改了z-index还是没用，要检查加载层的父元素有没有设置z-index或者position: relative/absolute/fixed——这些属性会创建新的堆叠上下文，导致你的加载层只能在父元素的层级范围内显示。这种情况建议把加载层放到<body>标签的直接子节点下，避免被父元素的层级限制。

这样调整后，你的加载层就能稳稳地显示在所有模态框的最上层啦！

内容的提问来源于stack exchange，提问作者FernandoPaiva