jquery - 在绝对位置创建元素？

Question

我正在尝试将一个元素插入 DOM，本质上是一个浮动框。完全在元素的正常流动之外，在特定位置重叠它下面的任何东西。

我在尝试：

$('body').append('<div id="popup" style="width:30px; height:30px;">HEY THERE</div>');
$('#popup').position({ my: 'left top', at: 'left bottom', of: $('a').first() });

但没有得到任何结果。我正在尝试将浮动框直接放置在文档中的第一个锚标记下方。

它被放入 DOM 中，但定位不正确。

可能我应该使用insert，或者某种相对定位和绝对定位的组合？

Answer 1

我会看看$.offset()：

var a = $('a').first(); 
var offset = a.offset(); 
var aLeft = parseInt(offset.left); 
var aTop = parseInt(offset.top); 

//And I have never used .position() I would edit the CSS: 
$("#popup").css({left: aLeft + 10, top: aTop + 10, position: "absolute", z-index: 1000});

Answer 2

如果您希望它附加在第一个锚标记下方，您可以尝试 -

$("a").first().after('<div id="popup" style="width:30px; height:30px;">HEY THERE</div>');

编辑：按照 OP 的建议：
添加position: absolute并将z-index: 999其放置在外面。