绝对定位元素上的Z索引显示高于Z指数元素

我想创建一些JavaScript，当一个对象被添加到窗口时，侦听器侦听除了放置的对象之外的任何单击身体，并删除该对象是否在窗口上的任何位置点击除了实际对象本身。绝对定位元素上的Z索引显示高于Z指数元素

通过许多不成功的尝试，我想出的想法是动态添加一个覆盖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; 
    });

我确定这与覆盖区域的绝对定位有关。在进行测试时，如果我使用绝对定位来放置模板，并且如果将模板对象直接附加到body上，就像我使用overlayDiv一样，则zIndex就像我最初预期的那样在overlayDiv上工作。不幸的是，除了测试之外，绝对定位这个元素对我来说并不合适。有没有办法解决这个问题？

来源

2012-01-09 ryandlf

恕我直言，请按照KISS，将您的问题保持简短。 – Baz1nga 2012-01-09 07:07:59

嗨容器元件放置在哪里？你有没有分配模板元素的位置属性？ – AmGates 2012-01-09 07:58:32

除z指数外，一切都已分配并正常工作。即使z索引被分配，但它不应该像它应该那样。 bazinga我为我的问题appologize，但总体而言，我认为这是非常短的和重点。你的评论真的没有任何帮助。 – ryandlf 2012-01-09 08:25:10

原来，z-index确实只能用于绝对放置的元素。因此解决身体点击监听器的原始计划将不起作用。相反，我决定使用jQuery和侦听器对象来监听点击。它是一个更清洁的解决方案，我只是不得不围绕它来包裹头部。 You can view my other solution here.

来源

2012-01-09 20:07:23 ryandlf

+1确保其他人都能从您的答案中获益。 – 2012-01-09 20:11:31

-1

尝试在将它追加到container之前设置zIndex。

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

来源

2012-01-09 07:09:30

之前没有区别。我试过了。 – ryandlf 2012-01-09 08:25:53

我不知道有多少，这将有助于您的具体问题，但我只是碰巧注意到，您可以与您的使用jQuery的“关于（）”方法的问题。

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

与“live”不同，我相信on（）参数是event，selector,function。

那么，你有这样的：

$('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; 
    });

希望帮助在一些小方法。

祝你好运！

来源

2012-01-09 07:16:04

我会研究这个，但on方法工作得很好。也许选择不是必需的？ – ryandlf 2012-01-09 20:08:52

我没有大量的.on（）经验，我只记得从最新的API文档。听起来像你无论如何解决了你的问题。干杯! – 2012-01-09 20:11:07

绝对定位元素上的Z索引显示高于Z指数元素

回答

相关问题