javascript - 绝对定位元素的 Z-Index 显示在更高 Z-Index 元素之上

Question

我正在尝试创建一些 javascript，当一个对象被添加到窗口时，一个监听器会监听除了放置的对象之外的 body 上的任何点击，并且如果在窗口上的任何地方除了实际对象本身被点击时删除该对象.

通过无数次不成功的尝试，我想出的想法是动态地向屏幕添加一个覆盖 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;
    });

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

Answer 1

事实证明，z-index 只能成功地用于绝对放置的元素。所以原计划解决body click listener的方案行不通了。相反，我决定改用 jQuery 和监听器对象来监听点击。这是一个更简洁的解决方案，我只需要全神贯注。 You can view my other solution here.