使用z-index

Question

我有一个网页，当ajax调用发生时，我会加载一个叠加层直到通话结束。

叠加层的css为：

.ajax-loading{
    position:   absolute;
    z-index:    1001;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .9 )
                url('/images/loading.gif') 
                50% 50% 
                no-repeat;              
}

为了表明这一点，我将<div id='loader'></div>作为$('#loader').addClass('ajax-loading');添加到removeClass()，加载完成后我.product-detail { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; background-color: black; } 。这完美没有任何问题。

当我为详细产品视图添加另一个叠加层时，问题就开始了。当有人点击产品详细信息链接时，会激活此叠加层。此叠加层的CSS为：

angular.module('module', [])
    .controller('ModuleCtrl', function ($scope) {
        var fnc = MenuControllerFunctions;
        $scope.onBtnPressed = fnc.handlerFnc();
    })
;
var MenuControllerFunctions = {
    handlerFnc: function(){
        return function() {
            console.log('Button pressed')
        }
    }
};

从这个叠加层中，有一些按钮可以进行ajax调用。如果我尝试在单击产品详细信息中的按钮时加载ajax加载覆盖，则ajax加载图层将显示在product-detail图层下方。如何修改此行为，以便在产品详细信息图层的顶部显示ajax加载叠加层？

非常感谢任何帮助！