html - Internet Explorer z-index 问题

Question

我可以找到很多与 Internet Explorer 相关的 z-index 问题，但这些解决方案对我不起作用或者我无法正确理解它。

我有一个表单元素。

单击表单提交后，我想用 div 覆盖表单，以便无法单击表单中的任何内容。为此，我使用了一个位置正确的叠加层，并且 js 也工作正常。它在 chrome 中完美运行，但在 IE8 中 z-index 不工作。

到目前为止我已经尝试过了

1.

<div style="position:absolute; z-index:100"></div>
<form></form>

2.

<div style="position:absolute; z-index:100"></div>
<form style="position:relative; z-index:50"></form>

3.

<div style="position:relative; z-index:50">
<div style="position:absolute; z-index:100"></div>
</div>
<form style="position:relative; z-index:50"></form>

4.

<div style="position:relative; z-index:50">
<div style="position:absolute; z-index:100"></div>
<form style="position:relative; z-index:50"></form>
</div>

我怎样才能让它在 IE8 中工作？所有这些在 chrome 中都可以正常工作。

Answer 1

Mike Alsup 的 BlockUI插件几乎已经做了你想要完成的事情。我经常使用它，以至于我编写了几个扩展方法来使用我经常使用的选项调用插件:

if ($.blockUI) {
    /* 
    *   Extension method to display/hide loading element for long-running tasks
    *   @@requires: jquery.blockUI.js
    */
    $.fn.loading = function (opt) {
        // clear out plugin default styling 
        $.blockUI.defaults.css = {};

        if (opt === 'start') {
            this.block({
                message: '<div class="loading"><i class="fa fa-refresh fa-4x fa-spin"></i></div>',
                css: {
                    border: 'none',
                    backgroundColor: 'none',
                    color: '#fff'
                }
            });
        }
        else {
            this.unblock();
        }
    };


    /* 
    *   Extension method to display/hide viewport-wide loading element for long-running tasks
    *   @@requires: jquery.blockUI.js
    */
    $.toggleOverlay = function toggleOverlay(opt) {
        if (opt === 'start') {
            $.blockUI({
                message: '<div class="loading"><p><i class="fa fa-refresh fa-4x fa-spin"></i><p><p>Loading. Please wait...</p></div>',
                css: {
                    border: 'none',
                    backgroundColor: 'none',
                    color: '#fff'
                }
            });
        }
        else {
            $.unblockUI();
        }
    }
}

我正在使用的标记假定您也在使用 FontAwesome，但可以将其更改为任何适合您的船。使用这两个扩展，您可以将叠加层添加到特定部分

$('#form').loading('start') // to start the overlay
$('#form').loading('end') // to end the overlay

或者为整个视口(viewport)添加一个叠加层

$.toggleOverlay('start') // to start overlay
$.toggleOverlay('end') // to end overlay

否则，只需按照插件页面上的示例进行操作即可。