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中使用它？所有这些在镀铬方面都很好。

Answer 1

有一种方法可以使用纯css完成此任务。请参阅以下代码：

HTML：

<div align="center"> <br><br><br><br> <a href="#popup" class="button">Submit form</a> </div> <div id="popup"> <a href="#" class="cancel">&times;</a> </div> <div id="overley" > </div>

CSS：

.button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; }#overley{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; }#popup { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: red; border:5px solid #cccccc; border-radius:10px; }#popup:target, #popup:target + #overley{ display:block; opacity:2; }

Answer 2

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

或向整个视口添加叠加层

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

否则，请按照插件页面上的示例进行操作。

Internet Explorer z-index问题

2 个答案: