Question

我的情况是，我必须在div附加一个名为#tooltip的{{1}}，以便它始终位于所有其他body之上（div在我的情况下不会起作用）。同时，由于可拖动，其位置必须与另一个z-index，div保持相对。换句话说，当我拖动#draggable-div时，#draggable-div也会随#tooltip移动。

这是html结构：

#draggable-div

jquery的：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div>Some Div</div>
        <div id="draggable-div" class="draggable">New Div Position Should Be Relative to Me</div>
        <div>Some More Div</div>
    </body>
</html>

但是，在追加到var alert = '<div id="tooltip"><div id="tooltiptext"><h4>Not Ready Yet!</h4></div></div>'; $("body").append(alert);时，如何将#tooltip的位置设为相对于#draggable-div？

提前谢谢。

Answer 1

如果您追加body，它始终是最后一个元素。您希望将其作为邻居添加到可拖动元素中，如下所示：

var alert = $('<div id="tooltip"><div id="tooltiptext"><h4>Not Ready Yet!</h4></div></div>');

alert.insertAfter($("#draggable-div"));

演示https://jsfiddle.net/21b26ufk/1/

Answer 2

我认为你应该通过prepend改变追加。

$("body").prepend(alert);

演示：https://jsfiddle.net/s588yfz1/

检查前置文档，也可以使用prependTo。 http://api.jquery.com/prepend/

如何在保持相对于另一个Div的同时将HTML附加到正文

2 个答案: