Javascript 绝对定位元素上的Z索引显示在更高的Z索引元素上方

我试图创建一些javascript，当一个对象被添加到窗口中时，监听器会监听除了放置的对象之外的任何对主体的点击，如果在窗口中除了实际对象本身之外的任何地方被点击，就会删除该对象

通过无数次失败的尝试，我想到的想法是动态地在屏幕上添加一个覆盖div，名为overlay2（或者其他什么，没关系），然后监听对该div的点击。当我将覆盖添加到窗口中，并将zIndex设置为比已经放置的顶部元素更高的数字（比如5000）然后将要放置在覆盖层上方的唯一对象的zIndex设置为更高的数字（例如6000），覆盖层仍然显示在所有对象的顶部，并且我无法选择要放置在其上方的div中的任何对象

var overlayDiv = document.createElement('div');
    overlayDiv.setAttribute('id', 'overlay2');
    overlayDiv.style.zIndex = '5000';
    overlayDiv.style.width = '100%';
    overlayDiv.style.height = '100%';
    overlayDiv.style.left = '0';
    overlayDiv.style.top = '0';
    overlayDiv.style.position = 'absolute';
    document.body.appendChild(overlayDiv);

    $(container).append(template);
    template.style.zIndex = '6000';

    //Listeners     
    //Page click listener. Closes the tool when the page is clicked anywhere but inside the parent.
    var initialClick = false;
    $('body').on('click.editObjectListeners', function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

---

我已经确定这一切都与OverlyDiv的绝对定位有关。在测试过程中，如果我使用绝对定位来放置模板，并且如果我像在OverlyDiv中那样将模板对象直接附加到主体上，那么zIndex会像我最初预期的那样在OverlyDiv上方工作。不幸的是，除了测试目的之外，绝对定位这个元素对我来说没有多大意义。有没有办法解决这个问题？

在将其附加到

容器之前，请尝试设置
zIndex

template.style.zIndex = '6000';
$(container).append(template);

我不知道这对您的特定问题有多大帮助，但我只是碰巧注意到您可能在使用jQuery的“on（）”方法时遇到了问题

首先，您使用的是jQuery版本1.7+，对吗

与“live”不同，我认为on（）参数是
事件
，
选择器
，
函数

那么你有这个：

$('body').on('click.editObjectListeners', function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

我想你想要这个：

$('body').on('click.editObjectListeners', [SOME SELECTOR], function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

希望这能对你有所帮助

祝你好运
 结果表明，z-index实际上只能成功地用于绝对放置的元素。因此，原来解决身体点击监听器的计划将不起作用。相反，我决定使用jQuery和listener对象来监听单击。这是一个更干净的解决方案，我只需要绕着它转一圈
 IMHO，跟随KISS，保持你的问题简短..嘿，容器元素放在哪里？是否分配了“模板元素位置”属性？除了z索引外，所有内容都已分配并正常工作。即使是z索引也会被分配，但它并没有按应有的方式工作。巴辛格：我对我的问题表示歉意，但总的来说，我认为这是非常简短和中肯的。你的评论真的没有任何帮助。嘿，你能把你的html部分放在这里来显示cotainer元素吗？请也放置模板元素的内容，您是如何创建模板元素的？我将对此进行研究，但on方法工作得很好。可能不需要选择？我对.on（）没有太多经验，我只是从最新的API文档中记住了这一点。听起来你无论如何都解决了你的问题。干杯+1确保其他人都能从你的回答中受益。