在页面上绝对定位元素EVEN如果父元素具有位置：相对或绝对

Question

有关示例，请参阅http://jsfiddle.net/u9qj0k9t/10/。

我试图创建一个上下文菜单绑定到页面上的通用元素。但是，我无法控制该页面在页面上的布局方式。上下文菜单工作正常，如果任何元素包装它没有一个位置：绝对/相对附加到它，但是当它弹出显示相对于元素的左上角而不是页面。我意识到这是通过设计，但我希望有一些CSS技巧，绝对定位一个页面上的元素无论如何包含它。

<div> 
    Comment<br/> 
    Comment<br/> 
    Comment<br/> 
    <div style="position:relative;"> <!-- have no control over this--> 
     <div id="customUIElement"> 
      <span id="placeHolder">Click Me</span> 
     </div> 
    </div> 
</div> 
$("#placeHolder").bind("click", function(e){ 
    var m = $("#popup"); 
    if(!m.length){ 
     var m = $("<div id='popup'></div>"); 
     $("#customUIElement").append(m); 
    } 
    m.css("height",100); 
    m.css("width",100); 
    m.css("background-color","#ff0000"); 
    m.css("zindex",9999999); 
    m.css("position","absolute"); 
    m.css("top", e.pageY); 
    m.css("left", e.pageX); 
    m.html("Hello, world"); 
    m.fadeIn("fast"); 
}); 

Answer 1

fiddle demo

我只想不的弹出追加到元素，
但对页：

$("#placeHolder").on("click", function(e){ 
    var m = $("#popup"); 
    if(!m.length){ 
     m = $("<div id='popup' />"); 
     $('body').append(m); 
    } 
    m.css({ 
     height:100, 
     width:100, 
     backgroundColor:"red", 
     zIndex:9999999, 
     position:"absolute", 
     top: e.pageY, 
     left: e.pageX 
    }).html("Hello, world").fadeIn("fast"); 
});