絕對定位元素上的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指數元素

回答

相關問題