如何在屏幕的特定位置创建div？

Question

我想在屏幕上的特定位置创建一个popup / div，如下面的图片

假设它应该在编辑按钮后开始，它的位置应该与图像中显示的完全相同。

Answer 1

查看我为您制作的JSFiddle。这很简单。这个例子虽然需要JQuery，但是如果你摆弄一下：我确信它可以在没有它的情况下运行：）

<强> HTML：

<div id="box1">
    This is box 1
    <br />
    <button onClick="openEditBox();" id="editButton">Edit</button>
</div>
<div id="box2" style="display: none;">
    This is the edit box...
    <br />
    Edit stuff goes here...
</div>

<强> JavaScript的：

$(document).mouseup(function (e) {
    var container = $("#box2");

    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

function openEditBox() {
    var editButtonPosition = $("#editButton").position();
    $("#box2").css({top: editButtonPosition.top + 20, left: editButtonPosition.left});
    $("#box2").show();
}

<强> CSS：

#box1 {
    background-color: #AAA;
    border: 1px solid #333;
    padding: 10px;
    width: 200px;
}
#box2 {
    background-color: lightblue;
    border: 1px solid #333;
    padding: 10px;
    width: 200px;

    z-index: 1000;

    position: fixed;
    left: 0;
    top: 0;
}

在JSFiddle上运行它来测试它并看看它是如何工作的： http://jsfiddle.net/fpde7by8/

关于投票：这里的人似乎讨厌简单的问题......但我没有看到问题。在某些时候，每个人都是初学者。

Answer 2

弹出div应该是第一个div的子节点（也许是编辑按钮的div），设置第一个div位置：relative，弹出div位置：absolute，所以弹出窗口的位置是相对于第一个div，那么你可以使用这样的代码：＆＃39; left：50px; top：50px;＆＃39;