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

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

1 个答案: