css - 绝对定位页面上的元素，即使父元素的位置为 :relative or absolute

Question

参见 http://jsfiddle.net/u9qj0k9t/10/举个例子。

我正在尝试创建一个关联到页面上通用元素的上下文菜单。但是，我无法控制该元素在页面上的布局方式。如果包装它的任何元素没有附加 position:absolute/relative ，则上下文菜单工作正常，但是当它出现时，弹出窗口显示相对于元素的左上角而不是页面。我意识到这是设计使然，但我希望有一些 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

我只是不将popup附加到该元素，
但到页面:

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